今回はライブラリを使って数字をカウントアップさせます。
金額や点数を演出するときなどに使えそうです。
ここでは最低限のオプションだけ実装しています。
サンプル動作再生
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>
