最終更新日：2021.02.04
数字をカウントアップするアニメーションはサイト制作で視覚的に数字を表現する時によく使われる手法です。
企業サイトでも数字で見る○○というページによく使われていますね！
アニメーションがあると目を引くので文字だけのページでも飽きること無く情報を拾うことができます。
それでは上記のような数字をカウントアップするアニメーションをコピペで作成しましょう！
DEMOはこちら
1000
色々使えそうだわぁ〜♪
ステップ１:カウントアップ用のJSを作成
以下のカウントアップ用JSソースをコピーし【jquery.counterup.min.js】という名前で保存します。
コピー
/*!
* jquery.counterup.js 1.0
*
* Copyright 2013, Benjamin Intal http://gambit.ph @bfintal
* Released under the GPL v2 License
*
* Date: Nov 26, 2013
*/(function(e){"use strict";e.fn.counterUp=function(t){var n=e.extend({time:400,delay:10},t);return this.each(function(){var t=e(this),r=n,i=function(){var e=[],n=r.time/r.delay,i=t.text(),s=/[0-9]+,[0-9]+/.test(i);i=i.replace(/,/g,"");var o=/^[0-9]+$/.test(i),u=/^[0-9]+\.[0-9]+$/.test(i),a=u?(i.split(".")[1]||[]).length:0;for(var f=n;f>=1;f--){var l=parseInt(i/n*f);u&&(l=parseFloat(i/n*f).toFixed(a));if(s)while(/(\d+)(\d{3})/.test(l.toString()))l=l.toString().replace(/(\d+)(\d{3})/,"$1,$2");e.unshift(l)}t.data("counterup-nums",e);t.text("0");var c=function(){t.text(t.data("counterup-nums").shift());if(t.data("counterup-nums").length)setTimeout(t.data("counterup-func"),r.delay);else{delete t.data("counterup-nums");t.data("counterup-nums",null);t.data("counterup-func",null)}};t.data("counterup-func",c);setTimeout(t.data("counterup-func"),r.delay)};t.waypoint(i,{offset:"100%",triggerOnce:!0})})}})(jQuery);
元のJSコードはgithubで公開されています！ありがてぇ！！
jquery.counterupをgithubからダウンロード
ステップ2:必要なJSライブラリの読み込み
動作に必要なjQueryと遅れて再生するために必要なwaypointsをcdnで読み込みます。
【jquery.counterup.min.js】は先程用意したjsファイルをサーバーにアップロードしてつかってくださいね。
以下をheader〜/header内に追加してください。
コピー
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="自分がアップロードした場所/jquery.counterup.min.js"></script>
ステップ3:HTMLに埋め込み
アニメーションさせるための命令文をHTMLに追加します。
以下をheader〜/header内に追加してください。
コピー
<script>
$(function () {
jQuery(document).ready(function($){
$('.count').counterUp({
delay: 10, //開始までの遅延
time: 1000 //カウントアップ終了までの時間
});
});
</script>
JSで指定した【.count】class内にある数字がカウントアップします。
コピー
<span class="count"">1000</span>
完成＼(^o^)／
1000
オプションついて
| delay | カウントアップごとのミリ秒単位の遅延 |
|---|---|
| time | カウントアップアニメーションの合計時間 |
| offset | カウンターが開始するビューポートパーセンタイル（デフォルトでは100であり、要素がビューポートに入る瞬間にトリガーされることを意味します） |
| beginAt | カウントアップする番号 |
| formatter | 数値をフォーマットするためのコールバック |
５つのオプションが用意されていますが難しい使い方をしないならdelayとtimeだけで希望の動きになります。
コピー
<script>
$(function () {
jQuery(document).ready(function($){
$('.count').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});
</script>
フルでつかてみた時。
1000
まとめ
すべての工程をまとめてコピペしちゃいたい方はこちらです！
たった数行でカウントアップするアニメーションが完成しちゃいました。
コピー
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="アップロードしたURL/jquery.counterup.min.js"></script>
<script>
jQuery(document).ready(function($){
$('.count').counterUp({
delay: 10,
time: 1000
});
});
</script>
<span class="count">1000</span>
うおーー色々カウントアップしちゃくなっちゃう！
コピペ、その先へ…
スクロールアニメーションと連動させて使用すると効果的なアニメーションにすることが出来ますよ。
CSSアニメーションとの組み合わせも楽しそうですね。
