スクロール起動カウントアップ統計
このセクションは、スクロールで画面に入った瞬間に数字が 0 から目標値までカウントアップする実績アピールブロックです。起動には IntersectionObserver を使い、 threshold:0.3 で 3 割見えたら発火、 unobserve で一度きりに制御しています。
解説
このセクションは、スクロールで画面に入った瞬間に数字が 0 から目標値までカウントアップする実績アピールブロックです。起動には IntersectionObserver を使い、threshold:0.3 で 3 割見えたら発火、unobserve で一度きりに制御しています。数字は requestAnimationFrame で更新し、1-Math.pow(1-r,3) のイージングで終盤がゆっくり止まる自然な動き。表示は toLocaleString() で 12,500 のように桁区切りされ、tabular-nums で桁幅が揃うため数字がガタつきません。
使う場面
- コーポレートサイトの「導入企業数」「満足度」などの実績
- サービス LP の信頼ブロック（対応件数・継続率）
- 年次レポートやイベントの成果ダイジェスト
各数字は data-target 属性で指定するだけなので、HTML を書き換えればすぐ差し替えられます。アニメ時間は dur=1600 のミリ秒で調整可能。動きを抑えたいユーザーには prefers-reduced-motion を見て即座に最終値を入れる分岐を足すと親切です。JavaScript が無効でも、最初に表示される 0 ではなく目標値を初期テキストにしておくと内容が伝わります。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
数字やラベルはどこで変えますか。
各項目のdata-target属性に最終的な数値を入れ、単位はsmall、説明はspanのテキストを書き換えます。JavaScript側の変更は不要で、属性を直すだけで対象の数字までカウントアップします。
カウントアップの速さは調整できますか。
JavaScript内のdur変数（初期1600ミリ秒）を変えると速度が変わります。小さくすると速く、大きくするとゆっくり止まります。終盤が滑らかに減速するイージングはそのまま機能します。