Web制作 jQuery

【jQuery】スクロールで数字をカウントアップするプラグイン『jquery-numerator.js』の使い方

スクロールしたら数字がカウントアップするアニメーションってどうやるの?
プラグインを使えば簡単に出来るよ!

今回は『jquery-numerator.js』というプラグインの使い方を解説していきます。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


スクロールで数字をカウントアップするプラグイン『jquery-numerator.js』の使い方

まずは以下のGitHubページにアクセスします。

jquery-numerator

『Code』ボタンをクリックするとこちらの画面が表示されるので『Download ZIP』をクリックしてファイルをダウンロードします。

jquery-numerator.jsダウンロード:GitHub

jquery-numerator.jsダウンロード:GitHub

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

jquery-numerator.jsファイル内容

jquery-numerator.jsファイル内容

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

 

ファイルを読み込む

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

jQueryを使ったことがない人はこちらの記事を参照下さい。

参考記事
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説
【初心者向け】jQueryとは?CDNを使った本体の読み込み方についても分かりやすく解説

続きを見る

jQuery本体と今回の『jquery-numerator.js』はbody閉じタグの直前に書きます。

<html>
  <head></head>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  <script src="js/jquery-numerator.js"></script>
  </body>
</html>

jQuery本体を最初に書くので、順番を間違えないようにしましょう。

 

コード解説

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

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

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

まずはHTMLを見てみます。

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

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

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

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) { // 画面サイズの下から1/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)
        });
      }
    });
  });
});

 

カウントアップ開始のタイミング

7行目は画面サイズの下から1/5までスクロールしたらカウントアップを開始させるコードです。

 

小数点が含まれている時のみ、小数点以下を表示

17行目の『rounding』の初期値は0で1にすると小数点以下の数字を表示出来ますが、例えばカウントアップさせたい数字が100の場合は100.0と小数点以下が0の場合でも表示されてしまいます。

逆に初期値の0の場合は100.5とかにしても100と表示されてしまいます(小数点以下は切り捨て)

なので100の時は100、100.5の時は100.5と表示されるようにするようにする為のコードが8~12行目になります。

 

カウントアップの動き

ここは等速の『linear』でいいかと思います。

他には『swing』も設定できるようです(最初と最後だけゆっくりで途中は速めに動く)

 

カウントアップの時間

これは『duration』で設定します(単位ミリ秒)

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

 

カウントアップする数値

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

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

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

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

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

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

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, jQuery
-