用途
新着
履歴
分類

JS 数字のカウントアップ演出

JS 数字のカウントアップ演出
数字を指定した数まで足して、積み上がっていく表現をJavaScriptで実装するサンプルです。

今回はライブラリを使って数字をカウントアップさせます。

金額や点数を演出するときなどに使えそうです。

ここでは最低限のオプションだけ実装しています。

サンプル動作再生

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>

ボタンで実行やスクロールで実行などは、以下のようにnewする部分をイベントで囲みます。

クリックのときの例

document.getElementById("myBtn").onclick = function() {
    let demo = new CountUp('myTargetElement', 10000, options);
    if (!demo.error) {
        demo.start();
    } else {
        console.error(demo.error);
    }
};
公開 2019-08-04 00:05:58
このページの二次元コード
JS 数字のカウントアップ演出

人気のサンプル

search -  category -  about
© 2024 kipure
Top