LP（ランディングページ）やコーポレートサイトで実績の数値を表示する際、画面をスクロールして数字が現れた瞬間に、「0から目標値まで数字がパラパラと動く演出）」を見たことがあると思います。静止した数字よりも視覚的なインパクトが強く、実績やデータの重要性をよりダイナミックに表現できます。今回はそのギミックの実装です。

まずはHTML要素の指定。span要素の数を増やせばその分カウントアップする要素を増やせます。

<p>従業員数:<span class="txtCount" data-count="2000">2000</span>人</p>

カウントアップさせたいHTML要素にdata-count属性を指定し、カウントアップさせたい上限の数値を指定します。また、SEOやJavaScriptが無効化されている環境、音声読み上げブラウザのために予め同じ数値をHTMLテキストとしても指定しておきます。

document.addEventListener('DOMContentLoaded', () => {
 function countUp(el){
  const duration = 500; //数字がカウントアップする時間を指定 (ミリ秒)
  const target = +el.getAttribute('data-count');
  const start = 0;
  const startTime = performance.now();
  const updateCount = (currentTime) => {
   const elapsed = currentTime - startTime;
   const progress = Math.min(elapsed / duration, 1);
   const currentNum = Math.floor(progress * (target - start) + start);
   el.textContent = currentNum.toLocaleString();
   if (progress < 1) {
    requestAnimationFrame(updateCount);
   } else {
    el.textContent = target.toLocaleString();
   }
  };
  requestAnimationFrame(updateCount);
 };
 const options = {
  threshold: 0.7 // 70%見えたら実行
 };
 const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
   if (entry.isIntersecting) {
    countUp(entry.target);
    observer.unobserve(entry.target);
   }
  });
 }, options);
 document.querySelectorAll('.txtCount').forEach(num => {
  observer.observe(num);
 });
});

JavaScriptのコード。IntersectionObserverを使い要素が見えたらカウントがアップするイベントを発火させます。durationでカウントアップさせる秒数をミリ秒で指定します。

例だと500ミリ秒（0.5秒）かけてカウントアップが完了するイメージです。

おしまい♥