JavaScriptにて数値のカウントアップ及びカウントダウンを表示する「countUp.js」ライブラリの利用方法
だいぶ前にバニラJSにて数値のカウントアップ及びカウントダウン表示を行う方法をメモしたが、もっと滑らかにカウントアップ及びダウンさせてほしいと要望を受けた(前の方法だとカクつく)。調べたところ「countUp.js」ライブラリだと滑らか且つ導入も簡単そう。以下に実装方法をメモ。
サンプル
https://taitan916.info/sample/countUp.js/
countUp.js
公式サイト
https://inorganik.github.io/countUp.js/
GitHub
https://github.com/inorganik/CountUp.js
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.5/countUp.umd.min.js"></script>
異なるバージョンを利用したい場合は以下から探す。
https://cdnjs.com/libraries/countup.js/2.0.5
実装方法
ソースコード
<main> <section> <b>1から10,000までカウントアップ</b> <div id="count_up"></div> </section><hr> <section> <b>10,000から1までカウントダウン</b> <div id="count_down"></div> </section> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.5/countUp.umd.min.js"></script> <script> //カウントアップ const count_up_options = { duration: 1, } const count_up = new countUp.CountUp(`count_up`, 10000, count_up_options); count_up.start(); //カウントダウン const count_down_options = { startVal: 10000, duration: 1, } const count_down = new countUp.CountUp(`count_down`, 1, count_down_options); count_down.start(); </script>
オプションについて
オプションについては公式ページで色々パラメータを編集し「Apply」ボタンをクリックするとソースコードが表示されるので、そちらをコピペすると良い。
関連記事
-
-
JavaScriptでCookieを取り扱う「js-cookie」ライブラリの利用方法
「jquery-cookie」プラグイン開発終了に伴い「js-cookie」ライ ...
-
-
JavaScriptにて数値の書式設定と操作を行える「Numerical.js」ライブラリの利用方法
以前JavaScriptで数値のカンマ区切り化とカンマ区切りの解除を行う方法をメ ...
-
-
ブラウザ開発者ツールの起動を検出しソースコード変更やリダイレクト設定できる「console-ban」ライブラリの利用方法
他サイトのソースコードを拝見するため開発者ツールを開こうとすると、偶に「デバッガ ...
-
-
ページ内のスクロールバーを見やすく且つ異なるブラウザ間でも同じデザインにする「SimpleBar」ライブラリの利用方法
CSSのoverflowでスクロールバーを設置した際、ブラウザによってデザイン( ...
-
-
パスワードの強度を判定できる「zxcvbn」ライブラリの使用方法
アカウントを作成するようなページで偶にパスワードの強度を判定してメーターで表示さ ...