スクロールで数字がカウントアップ！Intersection Observerで実装する軽量アニメーション

10月 16, 2025 10月 16, 2025

小瀧

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は「ページをスクロールすると、数字がスッと増えていくカウントアップ演出」をご紹介します。

企業サイトの実績紹介や数値データの可視化にぴったりな演出で、
見せ方ひとつでページ全体が“動きのある印象”になります。

この記事では、JavaScriptとIntersection Observerを使った実装方法を丁寧に解説していきます。

スクロール連動カウントアップとは？

「カウントアップアニメーション」とは、
ユーザーが画面をスクロールして特定の要素が表示されたタイミングで、
数字が「0 → 指定値」に向かってアニメーションしながら変化する表現です。

数字に“動き”が加わり、視線を引きつける
サービス実績や統計データを印象的に見せられる
スクロールで自然に再生されるため操作が不要

デモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本のHTML構造

まずは、数字を表示するためのシンプルなHTMLを用意します。

<section class="stats">
  <div class="stat-item">
    <span class="count" data-target="1200">0</span>
    <p>顧客数</p>
  </div>
  <div class="stat-item">
    <span class="count" data-target="98">0</span>
    <p>満足度（％）</p>
  </div>
</section>

data-target属性に、最終的に到達させたい数字を設定します。

CSSでレイアウトを整える

数字が中央に配置されるよう、簡単にスタイリングしておきましょう。

  .stats {
    display: flex;
    justify-content: center;
    gap: 80px;
    padding: 100px 0;
    background: #f5f5f5;
  }
  .stat-item {
    text-align: center;
    font-family: "Poppins", sans-serif;
  }
  .count {
    font-size: 3rem;
    font-weight: bold;
    color: #0078ff;
  }

JavaScriptでカウントアップ処理を実装

Intersection Observerを使って、要素が画面に現れたらアニメーションを開始します。

 const counters = document.querySelectorAll(".count");
  const options = { threshold: 0.5 };
  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const counter = entry.target;
        const updateCount = () => {
          const target = +counter.getAttribute("data-target");
          const current = +counter.innerText;
          const increment = target / 100;
          if (current < target) {
            counter.innerText = Math.ceil(current + increment);
            requestAnimationFrame(updateCount);
          } else {
            counter.innerText = target;
          }
        };
        updateCount();
        observer.unobserve(counter);
      }
    });
  }, options);
  counters.forEach((counter) => {
    observer.observe(counter);
  });