数字がカウントアップするアニメーションを実装する方法

CSS、JavaScript

今回の記事では、JavaScriptを使用して数字を0から9999までカウントアップするアニメーションを実装する方法について解説します。
記事にナンバリングをしていたり、アンケート結果の数字をアニメーションさせたりもできます！

数字の上限が確定している場合

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字を画面中央に設置する</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh; /* 画面全体の高さを利用する */
            margin: 0;
        }
        .counter {
            font-size: 3rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="counter" id="counter">0</div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const counterElement = document.getElementById("counter");
            let count = 0;
            const target = 9999;
            const interval = 10; // 10ミリ秒ごとにカウントアップする

            const incrementCounter = setInterval(() => {
                if (count <= target) {
                    counterElement.textContent = count;
                    count++;
                } else {
                    clearInterval(incrementCounter);
                }
            }, interval);
        });
    </script>
</body>
</html>

html

<div class="counter" id="counter">0</div>

上記のコード内の数字がカウントアップされます。

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* 画面全体の高さを利用する */
    margin: 0;
}

.counter {
    font-size: 3rem;
    font-weight: bold;
}

CSS部分では、body要素をflexボックスとして設定し、画面の中央に要素を配置するスタイルを追加しています。
.counterクラスは数字の表示部分に適用されるスタイルです。

JavaScript

JavaScriptでは、数字をカウントアップする処理を実装します。

document.addEventListener("DOMContentLoaded", function() {
    const counterElement = document.getElementById("counter");
    let count = 0;
    const target = 9999;
    const interval = 10; // 10ミリ秒ごとにカウントアップする

    const incrementCounter = setInterval(() => {
        if (count <= target) {
            counterElement.textContent = count;
            count++;
        } else {
            clearInterval(incrementCounter);
        }
    }, interval);
});

解説

  • DOMContentLoadedイベントリスナー内で、counterElement変数で数字を表示する要素を取得します。
  • count変数で現在のカウントを保持し、targetで最終的なカウントの目標値を設定します。
  • setInterval関数を使用して、指定した間隔（intervalミリ秒）ごとにカウントアップを行います。カウントが目標値に達したら、clearIntervalで処理を停止します。

サンプル

上記のコードを利用したものが下記となります。

See the Pen Counter_test1 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

0から9999までカウントアップされるようになっております。
上限が決まった数にカウントアップしたい場合は便利ですね。

ただ、スクリプトの方に上限の数値を設定しているため（この場合は9999）決まっていない数字（例えばですがランダムやナンバリングの場合）はカウントアップされないので注意が必要です。

それらを踏まえ、HTML内の数字をカウントアップするコードを用意しました。

数字の上限が決まっていない場合

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カウンターアニメーション</title>
    <style>
        .counter {
            font-size: 3rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="counter" id="counter">9999</div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const counterElement = document.getElementById("counter");
            const target = parseInt(counterElement.textContent, 10);
            let count = 0;
            const interval = 1; // ミリ秒単位でインクリメント間隔を指定

            const incrementCounter = setInterval(() => {
                if (count <= target) {
                    counterElement.textContent = count;
                    count++;
                } else {
                    clearInterval(incrementCounter);
                }
            }, interval);
        });
    </script>
</body>
</html>

HTML

<div class="counter" id="counter">9999</div>

このコードでは、divタグの中にクラス名counterとIDcounterを持つ要素を作成しています。
この要素が、カウントアップする数字を表示します。

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    const counterElement = document.getElementById("counter");
    const target = parseInt(counterElement.textContent, 10);
    let count = 0;
    const interval = 1; // ミリ秒単位でインクリメント間隔を指定

    const incrementCounter = setInterval(() => {
        if (count <= target) {
            counterElement.textContent = count;
            count++;
        } else {
            clearInterval(incrementCounter);
        }
    }, interval);
});

解説

  • DOMContentLoadedイベントリスナーを使用して、ページの読み込みが完了した後にスクリプトが実行されるようにします。
  • counter要素を取得し、そのテキスト内容を整数に変換して目標値として設定します。
  • count変数を0に初期化します。
  • setInterval関数を使用して、指定された間隔（ミリ秒）でカウントアップを実行します。
  • countが目標値に達するまで、countをインクリメントしてカウンター要素のテキスト内容を更新します。
  • 目標値に達したら、clearIntervalを呼び出してカウントアップを停止します。

サンプル

HTML内の<div class=”counter” id=”counter”>9999</div>の「9999」部分を上限に0からカウントアップされるようになります。

See the Pen Counter_test2 by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

カウント数が少ない場合は「const interval = 1; // ミリ秒単位でインクリメント間隔を指定」部分を修正してください。

まとめ

このように簡単なHTMLとJavaScriptを使用してカウンターアニメーションを実装することができます。WordPressの記事をナンバリングしていたり、アンケート結果の数字をアニメーションさせたい場合に有効ですので、シーンに合わせてご利用下さい！

タイトルとURLをコピーしました