jQueryを使ってアニメーションしながら指定した数字までカウントアップさせる方法

jQueryを使って、0から指定した数字までカウントアップする方法をご紹介いたします。指定した数字までアニメーションしながらカウントアップします。

以下にデモを用意しましたので、挙動についてはデモページをご参照ください。

デモページを見る

以前、jquery.animateNumberというプラグインをご紹介しましたが、今回はプラグインを使わずに実装する方法です。

jQueryを使ってアニメーションしながら指定した数字までカウントアップさせる方法

ステップ1. HTMLのマークアップ

HTMLでは、数字をカウントアップさせたい箇所にクラスを付与してあげます。今回は.countというクラスを指定しています。

<p>数字のカウント：<span class="count">10000</span></p>

.count内で指定した数字までカウントアップされます。

ステップ2. jQuery本体の読み込みとスクリプトの実行

続いて、jQuery本体とスクリプトを記述します。記述する場所は</body>の直前でOKです。

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.count').each(function () {
  $(this).prop('c',0).animate({
    c: $(this).text()
  }, {
    duration: 3000,
    easing: 'linear',
    step: function (now) {
      $(this).text(Math.ceil(now));
    }
  });
});
</script>

durationでカウントアップされるまでの時間、easingでアニメーションの種類を指定します。

easingの種類についてはjQueryリファレンスをご参照ください。

あとがき

カウントアップのアニメーションを追加することで、数字の部分をアピールしたい時に目立たせることができますね。

数字のカウントアニメーションを実装したい時は、ぜひ参考にしていただければと思います。