jQuery Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

 

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

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

スクロールで数字をカウントアップするプラグイン『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側でカウントアップさせる数値を設定しています。

まとめ

今回はjquery-numerator.jsの使い方を解説しました。

あまり使う機会はないかも知れませんが、覚えておくといいでしょう。

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作
-