数字のカウントアップ・ダウン | 動くWebデザインアイディア帳

グラフ
-数字のカウントアップ・ダウン-

See the Pen 9-5-1　数字のカウントアップ・ダウン by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内をスクロールして動きを確かめてね！

動きを実現する仕組み

Animated number counter というライブラリを使い数字のカウントアップとカウントダウンを行う。
カウントアップ・ダウンを行うきっかけは、jquery.inview というライブラリを使い、要素が表示されたタイミングで開始。

［使用するライブラリ］
＊ jQuery
＊ Animated number counter（https://github.com/LadyBiosphere/animated-counter）
＊ jquery.inview（https://github.com/protonet/jquery.inview）

HTMLの書き方

body内のカウントアップ・ダウンを表示させたい場所にHTMLを記載します。

<div id="box1" class="box"><!--画面に入ったら数字を動かす基点にするためのid を付与-->
<p>男性の学生数<br><span class="count-up count-size">2540</span>人</p><!-- count-up ← カウントアップ用class名-->
<!--/box--></div>

<div id="box2" class="box"><!--画面に入ったら数字を動かす基点にするためのid を付与-->
<p>学食充実満足度全国<br>第<span class="count-down count-size">1</span>位</p><!-- count-down ← カウントダウン用class名-->
<!--/box--></div>

body 終了タグ直前にjQuery、jquery.inview、動きを制御する自作のJS の3つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/protonet-jquery.inview/1.1.2/jquery.inview.min.js"></script>
<!--自作のJS-->
<script src="js/9-5-1.js"></script>
</body>

自作のJS内の書き方

//box1の指定
$('#box1').on('inview', function(event, isInView) {
	if (isInView) {
		//要素が見えたときに実行する処理
		$("#box1 .count-up").each(function(){
			$(this).prop('Counter',0).animate({//0からカウントアップ
		        Counter: $(this).text()
		    }, {
				// スピードやアニメーションの設定
		        duration: 2000,//数字が大きいほど変化のスピードが遅くなる。2000=2秒
		        easing: 'swing',//動きの種類。他にもlinearなど設定可能
		        step: function (now) {
		            $(this).text(Math.ceil(now));
		        }
		    });
		});
	}
});
//box2の指定
$('#box2').on('inview', function(event, isInView) {
	if (isInView) {
		//要素が見えたときに実行する処理
		$("#box2 .count-down").each(function(){
			 $(this).prop('Counter',10).animate({//10からカウントダウン
		        Counter: $(this).text()
		    }, {
				// スピードやアニメーションの設定
		        duration: 1000,//数字が大きいほど変化のスピードが遅くなる。1000=1秒
		        easing: 'swing',//動きの種類。他にもlinearなど設定可能
		        step: function (now) {
		            $(this).text(Math.ceil(now));
		        }
		    });
		});
	}
});