teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問可視領域でカウントダウンアニメーション。繰り返されてしまう・数字にカンマを入れたい

編集履歴

質問編集履歴

3

コード追加

2020/03/27 07:41

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
File without changes
test CHANGED
@@ -32,6 +32,100 @@
32
32
 
33
33
  ■コード
34
34
 
35
+ ```HTML
36
+
37
+ <div id="price1">
38
+
39
+ <span id="aaa">300000</span> 円
40
+
41
+ </div>
42
+
43
+ <div id="price2">
44
+
45
+ <span>200000</span> 円
46
+
47
+ </div>
48
+
49
+ <div id="price3">
50
+
51
+ <span>100000</span> 円
52
+
53
+ </div>
54
+
55
+ <div id="price4">
56
+
57
+ <span>90000</span> 円
58
+
59
+ </div>
60
+
61
+ ```
62
+
63
+ ```JS
64
+
65
+ $('#price1,#price2,#price3,#price4').appear(function () {
66
+
67
+
68
+
69
+ setTimeout(function () {
70
+
71
+ $({count: 300000}).animate({count: 150000}, {
72
+
73
+ duration: 800,
74
+
75
+ easing: 'linear',
76
+
77
+ progress: function() {
78
+
79
+ $('#aaa').text(Math.ceil(this.count));
80
+
81
+ }
82
+
83
+ });$({count: 200000}).animate({count: 100000}, {
84
+
85
+ duration: 800,
86
+
87
+ easing: 'linear',
88
+
89
+ progress: function() {
90
+
91
+ $('#price2 span').text(Math.ceil(this.count));
92
+
93
+ }
94
+
95
+ });$({count: 100000}).animate({count: 50000}, {
96
+
97
+ duration: 800,
98
+
99
+ easing: 'linear',
100
+
101
+ progress: function() {
102
+
103
+ $('#price3 span').text(Math.ceil(this.count));
104
+
105
+ }
106
+
107
+ });$({count: 90000}).animate({count: 1000}, {
108
+
109
+ duration: 800,
110
+
111
+ easing: 'linear',
112
+
113
+ progress: function() {
114
+
115
+ $('#price4 span').text(Math.ceil(this.count));
116
+
117
+ }
118
+
119
+ });
120
+
121
+ }, 1000);
122
+
123
+ });
124
+
125
+ ```
126
+
127
+ codepenにもアップしております。
128
+
35
129
  https://codepen.io/chibiyuko_0124/pen/mdJQZYK
36
130
 
37
131
 

2

内容修正

2020/03/27 07:41

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
@@ -1 +1 @@
1
- カウントダウンアニメーションの数字にカンマを入れたい
1
+ 可視領域でカウントダウンアニメーション。繰り返されてしまう・数字にカンマを入れたい
test CHANGED
@@ -1,14 +1,12 @@
1
1
  いつもお世話になっております。
2
2
 
3
- jsで可視領域に入った1病後に数字をカウントダウンさせるアニメーションを実装しています。
3
+ jsで可視領域に入った1秒後に数字をカウントダウンさせるアニメーションを実装しています。
4
4
 
5
- 数字が金額なので、カンマを入れたいのですがやり方がわからず困っています。
5
+ 以下の2点がわからず困っております。
6
6
 
7
7
 
8
8
 
9
- ■コード
9
+ 1）正規表現でカンマを入れたい
10
-
11
- https://codepen.io/chibiyuko_0124/pen/mdJQZYK
12
10
 
13
11
 
14
12
 
@@ -22,6 +20,22 @@
22
20
 
23
21
 
24
22
 
23
+ 2）カウントダウンのアニメーションが不安定。
24
+
25
+ 発火中に途中でスクロールし再び戻ると、アニメーションが繰り返されてしまいます。
26
+
27
+ 可視領域で発火のjsはjQuery-appearを使用しております。
28
+
29
+ https://bl6.jp/web/javascript/jquery-appear/
30
+
31
+
32
+
33
+ ■コード
34
+
35
+ https://codepen.io/chibiyuko_0124/pen/mdJQZYK
36
+
37
+
38
+
25
39
  ご教示いただけますと幸いです。
26
40
 
27
41
 

1

内容修正

2020/03/27 07:24

投稿

chibiyuko_0124
chibiyuko_0124

スコア18

test CHANGED
@@ -1 +1 @@
1
- countTo.js 可視領域に入った1秒後にカウントダウンを開始したい
1
+ カウントダウンアニメーションの数字にカンマを入れたい
test CHANGED
@@ -1,38 +1,24 @@
1
1
  いつもお世話になっております。
2
2
 
3
- jQuery countToを使って、通常価格→割引価格のようなカウントダウン機能を実装したいです。
3
+ jsで可視領域に入った1病後に数字をカウントダウンさせるアニメーションを実装しています。
4
4
 
5
- 元値を表示させたいので、スクロールで可視領域に入った1秒後に発火させたいのですが、うまくいかず困っております。
5
+ 数字が金額なので、カンマを入れたいのですがやり方がわからず困っています。
6
-
7
- また、動きもカクカクしているので滑らかにしたいです。
8
-
9
-
10
-
11
- ■やりたいこと
12
-
13
- ・可視領域に入った1秒後にカウントダウン開始
14
-
15
- ・アニメーションは1回のみ
16
-
17
-
18
-
19
- ■事象
20
-
21
- ・スクロールするたびに数字が動いてしまう
22
-
23
- ・設定している数字までカウントダウンせず、途中で止まってしまう（最初のだと、3,333,333で止めたいのに2,500,000で止まる）
24
-
25
- ・動きがかたいのでなめらかにしたい（これは仕方ない？）
26
-
27
-
28
6
 
29
7
 
30
8
 
31
9
  ■コード
32
10
 
33
- https://codepen.io/chibiyuko_0124/pen/gOpQNbx
11
+ https://codepen.io/chibiyuko_0124/pen/mdJQZYK
34
12
 
35
13
 
14
+
15
+ ```
16
+
17
+ replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
18
+
19
+ ```
20
+
21
+ こちらを入れれば良さそうなのですが、どのように入れればいいかわからず困っております。
36
22
 
37
23
 
38
24