スクロールでカウントアップ

解説

このパーツは、要素が画面に入った瞬間から数字を「0」から目標値まで一気に増やしていくカウントアップ表示です。IntersectionObserverで対象がビューポートに入ったことを検知し、requestAnimationFrameで1フレームごとに少しずつ加算します。目標値はdata-to属性に持たせているので、HTMLの値を書き換えるだけで「2,480社」でも「98%」でも使い回せます。toLocaleString()で3桁区切りも自動です。

使うとよい場面

• 実績紹介の「導入企業数」「累計ダウンロード数」などのインパクトを出したいセクション
• サービスサイトの強みを並べる数値ハイライト
• レポートやダッシュボードのサマリー表示

加算の速さはMath.ceil(to/60)のおよそ60を増減して調整します。値を小さくするとゆっくり、大きくすると速く到達します。一度発火したらdisconnect()で監視を解除しているため、スクロールで前後しても再発火せず処理は軽量です。動きを抑えたい利用者のために、prefers-reduced-motionが有効なときは最初から最終値を表示する分岐を足すと親切です。

使用例・適したシーン

• LP の演出強化
• 記事の読了率向上
• ストーリーテリング表現