数字をカウントアップ出来るプラグイン「jquery-numerator.js」の使い方

こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！

今回は、

といった方に対する記事となります。

jquery-numerator.jsをダウンロード

まずはgithubで公開されているファイルをダウンロードします。

jquery-numerator

ファイルを解凍するとこれらのファイルが入っています。

使用するのは「jquery-numerator.js」になります。

ファイルを読み込む

jQueryを使用するので、jQuery本体を読み込むのを忘れないようにして下さい。

このようになりますね。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="js/jquery-numerator.js"></script>

コード解説

まずは完成形を見てみます。

今回はスクロールしていき、画面内に表示されて少ししたらカウントアップが開始されるようにします。

See the Pen
カウントアップ by junpei (@junpei-sugiyama)
on CodePen.

まずはHTMLを見てみます。

<div class="container">
  <div class="count js-count">
    <span class="js-num" data-num="99800">0</span>
    <span>円</span>
  </div>
  <div class="count js-count">
    <span class="js-num" data-num="95">0</span>
    <span>%</span>
  </div>
  <div class="count js-count">
    <span class="js-num" data-num="3.6">0</span>
    <span>件</span>
  </div>
</div>

jQueryを適用させる箇所のclass名には「js-」を付けています。

またカウントアップさせる箇所は0をspanタグで囲い、data属性にカウントアップさせる数字を書きます。

CSSは特に解説が必要な箇所はありません。

jQueryを見てみます。

$(function () {
  $(window).on("load scroll", function () {
    $(".js-count").each(function () {
      var txtPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > txtPos - windowHeight + windowHeight / 5) {
        if ($(".js-num", this).attr("data-num").indexOf(".") > -1) {
          var rounding = 1;
        } else {
          var rounding = 0;
        }
        $(".number", this).numerator({
          easing: "linear", //カウントアップの動き
          duration: 1000, //カウントアップの時間
          toValue: $(".js-num", this).attr("data-num"), //カウントアップする数値
          rounding: rounding, //小数点以下の桁数（初期値：0）
        });
      }
    });
  });
});

カウントアップの時間

これはdurationで設定します（単位ミリ秒）

カウントアップさせる数字にバラつきがあっても時間で設定してるので、カウントアップ開始と終了の時間は全部同じになります。

カウントアップする数値

ここには直接数字を入れる事も出来ます。

その際はdata属性を使わずにHTMLはこのようにします。

<span class="js-num"></span>

data属性を使う時は0を入れていましたがこの場合は入れておらず、カウントアップする数値が0からその数値までカウントアップされます。

ただ決まった数値しか設定出来ないので、カウントアップさせる箇所が1つの時しか使えないかと思います。

今回は複数個所あると想定して、data属性を使ってHTML側でカウントアップさせる数値を設定しています。

以上です。