teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

修正

2020/02/23 14:33

投稿

katusi
katusi

スコア12

title CHANGED
File without changes
body CHANGED
@@ -114,19 +114,41 @@
114
114
  var window_h = $(window).height();
115
115
 
116
116
  $(window).on("scroll", function() {
117
+ var scroll_top = $(window).scrollTop();
118
+ var countSpeed = 10;
117
119
 
120
+ $('.boxes').each(function() {
118
- var scroll_top = $(window).scrollTop();
121
+ var elem_pos = $(this).offset().top;
119
122
 
123
+ if (scroll_top >= elem_pos - window_h + 600) {
120
- $('.boxes').each(function() {
124
+ $(this).addClass('fadein'); 
121
125
 
126
+ // countクラスが付与されているオブジェクトをループ
127
+ $('.count').each(function(){
122
- var elem_pos = $(this).offset().top;
128
+ var self = $(this),
129
+ // data-num属性から最大値を取得
130
+ countMax = self.attr('data-num'),
131
+ // カンマを除去して数値に変換して取得
132
+ thisCount = parseInt(self.text().replace(/,/, '')),
133
+ countTimer;
123
134
 
135
+ function timer(){
136
+ countTimer = setInterval(function(){
137
+ // 数値を1加算
138
+ var countNext = thisCount++;
139
+ // 数値をカンマ文字列に変換してHTMLテキストに設定
140
+ self.text(countNext.toLocaleString());
124
141
 
125
- if (scroll_top >= elem_pos - window_h + 600) {
142
+ if(countNext == countMax){
126
- $(this).addClass('.fadein'); 
143
+ clearInterval(countTimer);
127
- }
144
+ }
145
+ },countSpeed);
146
+ }
147
+ timer();
128
- });
148
+ });
149
+ }
129
- });
150
+ });
151
+ });
130
152
  </script>
131
153
  ```
132
154
  ### 前提・実現したいこと