【HTML/CSS/JS】数字表現のトレンド！カウントアニメーションの作成方法

ホームページ作成 2024.09.27 2024.09.27

ホーム
ホームページ作成
【HTML/CSS/JS】数字表現のトレンド！カウントアニメーションの作成方法

今回は数字表現のトレンドの１つであるカウントアニメーションの作成方法について紹介します。Webサイトやホームページで数値を基に閲覧者に対してアピールをする際に取り入れると、より洗練された感じを演出出来るのでぜひご活用してみてください。

1 今回つくるもの
2 index.html
3 style.css
4 count.js
- 4.1 カウンターの仕様
5 まとめ

今回つくるもの

数字がカウントアップしていきピタっと止まるアニメーションを作成していきます。

index.html

htmlファイルには以下のコードを記述していきます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Oswald:wght@200..700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <title>カウントアニメーションサンプル</title>
</head>
<body>
    <main>
        <div class="info-data">
            <p>
                年間受注数：
                <span data-count="1920">0</span>件
            </p>
            <p>
                累計販売実績：
                <span data-count="8500">0</span>件
            </p>
            <p>
                ご利用者数：
                <span data-count="45000">0</span>人
            </p>
        </div>
    </main>
<script src="./count.js"></script>
</body>
</html>

data-count属性に最終的に表示させたい数値をセットしていきます。

style.css

cssファイルには以下のコードを記述します。

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #4a4a4a;
  font-family: "Oswald","Noto Sans JP";
}

main {
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

main section.top {
  width: 100%;
  height: 100vh;
  background-image: url(../images/bg_texture.png);
  background-color: #4a4a4a;
}

main .info-data {
  padding: 5vw 0;
}

main .info-data p {
  margin-right: 25px;
  font-weight: 600;
  font-size: calc(16px + 0.4vw);
  text-align: right;
}

main .info-data p span {
  display: inline-block;
  margin: 0px 25px;
  color: #4065aa;
  font-size: calc(24px + 4vw);
  font-weight: 400;
  min-width: 275px;
}

アニメーションに関わる特筆すべきプロパティはないので、今回は説明を割愛します。

count.js

続いてカウンター本体であるjavascriptファイルを作成していきます。

function animateCount(element) {
    const target = parseInt(element.getAttribute('data-count')); // 目標のカウント
    let current = 0; // 現在のカウント
    const duration = 1000; // アニメーションの継続時間（ミリ秒）
    const startTime = performance.now(); // 開始時間

    function update() {
        const now = performance.now();
        const elapsedTime = now - startTime;
        const progress = Math.min(elapsedTime / duration, 1); // 0から1までの進捗率

        current = Math.floor(progress * target); // 現在のカウントを計算
        element.textContent = current.toLocaleString(); // カンマ区切りに変換

        if (progress < 1) {
            requestAnimationFrame(update); // アニメーションを継続
        } else {
            element.textContent = target.toLocaleString(); // 最終的に目標の値をセット
        }
    }

    requestAnimationFrame(update);
}

// IntersectionObserverを使って、info-dataが画面内に入ったらカウントアニメーションを実行
document.addEventListener('DOMContentLoaded', () => {
    const countElements = document.querySelectorAll('span[data-count]');
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
            // スクロール領域に入った時にアニメーションを開始
            animateCount(entry.target); // 個々のspan要素に対してアニメーションを開始
            observer.unobserve(entry.target); // 一度実行したらその要素の監視を停止
            }
        });
    }, {
        threshold: 1.0 // 100%以上表示されたらアニメーションを開始
    });

    countElements.forEach(element => {
        observer.observe(element); // 各span要素を監視
    });
});