スクロール連動カウントアップ
数字が0から目標値まで一気に駆け上がっていくカウントアップ表示です。累計ユーザー数や導入実績などの大きな数値を、静止した文字ではなく動きで見せることで印象に残しやすくなります。 動作は、目標値を data-to 属性から読み取り、それを約60分割した刻み幅で setInterval が25ミリ秒ごとに加算していく仕…
解説
数字が0から目標値まで一気に駆け上がっていくカウントアップ表示です。累計ユーザー数や導入実績などの大きな数値を、静止した文字ではなく動きで見せることで印象に残しやすくなります。
動作は、目標値を data-to 属性から読み取り、それを約60分割した刻み幅で setInterval が25ミリ秒ごとに加算していく仕組みです。表示には toLocaleString を使っているので、桁の多い数字も自動でカンマ区切りになり読みやすくなります。目標に達すると clearInterval でタイマーを止め、ちょうどの値で停止します。
使い方とカスタマイズ
- サービス紹介ページの実績セクション
- 会社概要の数字で語るアピール
- ダッシュボードのサマリー表示
到達する数字は HTML の data-to、増える速さは刻み幅と 間隔で調整します。名称どおりスクロールで画面に入った時だけ走らせたい場合は、IntersectionObserver で要素の表示を検知してから起動させるのが定番です。動きを好まない利用者には最終値を即時表示する分岐を用意しておくと安心です。
使用例・適したシーン
- 実績数字セクション
- 統計の見える化
- 達成数の演出
よくある質問
目標の数字やカウントの速さは変えられますか
変えられます。到達する数字は HTML の data-to 属性で指定し、速さは1回の加算量と setInterval の間隔で調整します。値を小さくするほどゆっくり数えます。
画面に入ったときだけ動かせますか
可能です。IntersectionObserver で要素が表示されたことを検知し、そのタイミングでカウントを開始する処理を加えれば、スクロールして見えた瞬間に走り出します。