数字カウントアップアニメーション
0 から目標の数字までイージングを効かせて数え上げる、統計セクション向けの演出です。各数字には data-target で到達値を持たせ、JavaScript が performance.now で経過時間を測りながら現在値を計算します。
解説
0 から目標の数字までイージングを効かせて数え上げる、統計セクション向けの演出です。各数字には data-target で到達値を持たせ、JavaScript が performance.now で経過時間を測りながら現在値を計算します。動きの緩急は ease-out 式で、最初は速く終盤でゆっくり止まるため上品に見えます。描画は requestAnimationFrame で 1 フレームずつ更新し、表示には toLocaleString を使って 12,500 のように桁区切りを自動で入れています。data-suffix を付ければ末尾に「%」などの単位も添えられます。
活躍する場面
- 実績紹介の「導入社数」「累計ユーザー数」などの数値強調
- サービス LP の満足度やリピート率の見せ方
- レポートやダッシュボードのサマリー表示
到達値は data-target、単位は data-suffix、所要時間は dur の値で変えられます。数字が動いても幅が暴れないよう font-variant-numeric:tabular-nums で等幅にしてあります。注意点として、現状はページ表示と同時に動き出すため、スクロールで見えたときに発火させたい場合は IntersectionObserver と組み合わせます。動きを抑えたい利用者には最終値をすぐ表示する配慮があると親切です。
使用例・適したシーン
- 実績数字セクション
- 統計の見える化
- 達成数の演出
よくある質問
目標の数字や単位はどう設定しますか
各数字の要素に data-target で到達値を、data-suffix で末尾の単位（% など）を指定します。桁区切りのカンマは toLocaleString が自動で付けるため、12500 と書けば 12,500 と表示されます。
スクロールで見えたときに動かせますか
標準ではページ読み込みと同時に開始します。画面に入った時点で動かしたい場合は IntersectionObserver で要素の表示を検知し、交差したタイミングで animate を呼び出すように変えると、見られた瞬間にカウントが始まります。