画面に要素が入ったらクラスを追加し、JQueryでアニメーションをスタートさせる

前提・実現したいこと

ウェブページで画面に入ったら数字をカウントアップさせるコードを書きたいのですが、アニメーションがスタートしません。

まず、カウントアップ自体は実現することが出来たのですが、それが画面の中に入ったときに発動する方法がわかりません。
カウントアップ自体は「.count」というクラスで操作しているのですが、画面に「.counted」が入ったとき「.count」を追加するというコードを書きました。

「.count」自体は正常に追加されているのですがカウントアップが始まりません。

発動条件に「.countが追加せれた時点で発動する」という条件を付けなければならないのか？と思い色々と試したのですが、javascriptはほぼ未経験のため分かりませんでした。お力添えを頂ければ幸いです、、、

発生している問題・エラーメッセージ

・「.count」が追加されてもアニメーションが始まらない

該当のソースコード

jQuery
1// 数時間とアップ
2$(function(){
3    var countElm = $('.count'),
4    countSpeed = 10;
5
6    countElm.each(function(){
7        var self = $(this),
8        countMax = self.attr('data-num'),
9        thisCount = self.text(),
10        countTimer;
11
12        function timer(){
13            countTimer = setInterval(function(){
14                var countNext = thisCount++;
15                self.text(countNext);
16
17                if(countNext == countMax){
18                    clearInterval(countTimer);
19                }
20            },countSpeed);
21        }
22        timer();
23    });
24});

JavaScript
1// 画面内に入ったらcountをクラスに追加
2var boxes = document.querySelectorAll(".counted");
3var boxesArray = Array.prototype.slice.call(boxes, 0);
4var options = {
5  root: null,
6  rootMargin: "0px 50%",
7  threshold: 0,
8};
9var observer = new IntersectionObserver(doWhenIntersect, options);
10boxesArray.forEach(function (box) {
11  observer.observe(box);
12});
13
14function doWhenIntersect(entries) {
15  var entriesArray = Array.prototype.slice.call(entries, 0);
16  entriesArray.forEach(function (entry) {
17    if (entry.isIntersecting) {
18      entry.target.classList.add("count");
19    }
20  });
21}

html
1<!DOCTYPE html>
2<html Lang="ja">
3<!-- Meta -->
4<meta charset="UTF-8">
5<title>テンプレート</title>
6<!-- Script -->
7<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
8rel="stylesheet">
9<link href="static/css/bootstrap.min.css" rel="stylesheet">
10<link href="static/css/style.css" rel="stylesheet">
11<link href="static/css/style_sp.css" rel="stylesheet">
12<script src="static/js/bootstrap.min.js"></script>
13<script src="static/js/main.js"></script>
14</head>
15<body>
16<div class="count-sec">
17	<div class="container">
18		<div class="item-data">
19			<span class="counted" data-num="100">0</span>万円
20		</div>
21	</div>
22</div>
23</body>
24
25

試したこと

参考にしたサイト一覧はこちらです。

■jQueryで数字をカウントアップしながら表示する方法
http://black-flag.net/jquery/20161108-6221.html

■スクロールアニメーションを実現！Intersection Observer APIの使い方
https://hsmt-web.com/blog/js-intersection-observer/

補足情報（FW/ツールのバージョンなど）

Jon_do

2020/12/10 23:08

問題を再現出来るコードを追記するのをおすすめします。この手の動作不良はhtmlやcssが原因の可能性もあります。

yambejp

2020/12/11 01:59

scrollイベントでactiveクラス的なものを付け外しして MutationObserverでチェックすればいけそうですがそのアニメーションは隠れているときほんとに止めないといけないのでしょうか？

momon-zzz

2020/12/11 06:22

htmlを追加させていただきました！ CSSは特に書いていない状態です。止めていない場合だとページを読み込んだ時点で発動されてしまい、この箇所にたどり着くときには数字が指定した数値にたどり着いてしまいます。 Javascriptは初心者なので「scrollイベントでactiveクラス的なものを付け外しして MutationObserverでチェックすればいけそうですが」というのもよく理解出来ないレベルです、、、

yambejp

2020/12/11 06:29

仕様を言葉で追記ください・最初「.counted」は画面内になく、値は0 ・画面にはいってきたらカウントアップ？どういうスピードで、どの範囲で？・画面外にでたら止める？

momon-zzz

2020/12/11 07:05

・「.counted」はページ中腹にあるので読み込み直後は画面外にある。・画面内に無い場合数字は０。・画面に入ったらカウントがスタート。・ここで言う画面内とは「.counted」のこと。・カウントのスピードはjQueryで管理している。（３秒ほどで設定した数値になるスピード）・カウント中に画面から出た場合でもそのままカウントされ続ける。・一度カウントが開始されたら画面外に出た場合も止めない。

yambejp

2020/12/11 07:11

ちなみに.countedはクラス管理ですが1箇所しかないということですか？ interval処理をするとしてもidを複数持つかどうか微妙なので・・・

momon-zzz

2020/12/11 07:14

「.counted」は複数作る予定ですが、デザイン上同じ場所にあるので同時にスタートしても問題ないです。

行動規範の内容に同意します

回答3件

自己解決

別の質問サイトでの回答が理想通りの動きでしたので、解決方法として載せておきます。

IntersectionObserver内でカウントアップの蹴り出しを操作するのが正解だったようです。
これを応用すれば「画面に入ったとき発火する」の動きが簡単に行えるようになりそうです。コメントや回答をして頂いた皆様に感謝します。

■メモ
・「data-num="最高数値"」
・<span class="counted">最初の数字</span>
・ここでは「.couted」で管理しているので、変える場合は適宜変更する。

html
1
2<body>
3<div class="count-sec">
4    <div class="container">
5        <div class="item-data">
6            <span class="counted" data-num="100">0</span>万円
7        </div>
8    </div>
9</div>
10<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11</body>
12

javascript
1// // 画面内に入ったらcountをクラスに追加
2var boxes = document.querySelectorAll(".counted");
3var boxesArray = Array.prototype.slice.call(boxes, 0);
4var options = {
5  root: null,
6  rootMargin: "0px 50%",
7  threshold: 0,
8};
9var observer = new IntersectionObserver(doWhenIntersect, options);
10boxesArray.forEach(function (box) {
11  observer.observe(box);
12});
13
14function doWhenIntersect(entries) {
15  var entriesArray = Array.prototype.slice.call(entries, 0);
16  entriesArray.forEach(function (entry) {
17    if (entry.isIntersecting) {
18      entry.target.classList.add("count");
19    }
20  });
21  // 数時間とアップ
22  $(function(){
23      var countElm = $('.count'),
24      countSpeed = 10;
25
26      countElm.each(function(){
27          var self = $(this),
28          countMax = self.attr('data-num'),
29          thisCount = self.text(),
30          countTimer;
31
32          function timer(){
33              countTimer = setInterval(function(){
34                  var countNext = thisCount++;
35                  self.text(countNext);
36
37                  if(countNext == countMax){
38                      clearInterval(countTimer);
39                  }
40              },countSpeed);
41          }
42          timer();
43      });
44  });
45}
46

投稿2020/12/11 08:06

momon-zzz

総合スコア11

とりあえず、可視領域にはいると発動するサンプル上げておきます

codepen visibled & count up

可視範囲から外れても止めなくていいということなので
ソース中「if(flg1 && flg2) x.classList.add('active');」としていますが
これをコメントアウトして次の行のコメントアウトをはずせば外れると止まります

投稿2020/12/11 07:21

yambejp

総合スコア116683

momon-zzz

2020/12/11 08:22

ソースコードありがとうございます！上記のコードですとカウントアップさせたい数字が複数あった場合の対応が分からなかったのと、ストップする上限の数字指定が無かったので、別のサイトで来た回答を解決方法として載せることといたしました。ご助力いただき誠にありがとうございました。

行動規範の内容に同意します

別の質問サイトでの帰ってきた回答が理想通りの動きでしたので、解決方法として載せておきます。

■メモ
・「data-num="最高数値"」
・<span class="counted">最初の数字</span>
・ここでは「.couted」で管理しているので、変える場合は適宜変更する。

■参考サイト
https://qiita.com/ryo_hisano/items/42f5980720bc832e6e09
（Intersection Observerの利用方法）

html
1
2<body>
3<div class="count-sec">
4    <div class="container">
5        <div class="item-data">
6            <span class="counted" data-num="100">0</span>万円
7        </div>
8    </div>
9</div>
10<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
11</body>
12

javascript
1// // 画面内に入ったらcountをクラスに追加
2var boxes = document.querySelectorAll(".counted");
3var boxesArray = Array.prototype.slice.call(boxes, 0);
4var options = {
5  root: null,
6  rootMargin: "0px 50%",
7  threshold: 0,
8};
9var observer = new IntersectionObserver(doWhenIntersect, options);
10boxesArray.forEach(function (box) {
11  observer.observe(box);
12});
13
14function doWhenIntersect(entries) {
15  var entriesArray = Array.prototype.slice.call(entries, 0);
16  entriesArray.forEach(function (entry) {
17    if (entry.isIntersecting) {
18      entry.target.classList.add("count");
19    }
20  });
21  // 数時間とアップ
22  $(function(){
23      var countElm = $('.count'),
24      countSpeed = 10;
25
26      countElm.each(function(){
27          var self = $(this),
28          countMax = self.attr('data-num'),
29          thisCount = self.text(),
30          countTimer;
31
32          function timer(){
33              countTimer = setInterval(function(){
34                  var countNext = thisCount++;
35                  self.text(countNext);
36
37                  if(countNext == countMax){
38                      clearInterval(countTimer);
39                  }
40              },countSpeed);
41          }
42          timer();
43      });
44  });
45}
46