今回はライブラリを使って数字をカウントアップさせます。
金額や点数を演出するときなどに使えそうです。
ここでは最低限のオプションだけ実装しています。
サンプル動作再生
0から10000までのカウントアップを3秒で表示しています。
(開始と終了の値を調整すればカウントダウンも可能です。)
今回使っているライブラリはこちらです。
「countUp.js」ここでいろんなオプションを試すことができます。
countUp.jsをダウンロードするにはここが良さそうです。
JavaScriptは以下のように書きます。
<script type="module"> import { CountUp } from '/js/lib/countup/countUp.js'; //ライブラリのjsファイル const options = { startVal: 0, //開始の数 (デフォルト 0) duration: 3, //3秒で到達 (デフォルト 2) separator: '', //カンマを入れない (デフォルト カンマあり) }; let demo = new CountUp('myTargetElement', 10000, options); if (!demo.error) { demo.start(); } else { console.error(demo.error); } </script>
htmlは数字が入るIDを書くだけ。
<div id="myTargetElement"></div>