カウントアップ数値アニメーション
カウントアップは、0 から目標値まで数字が増えていく演出で、実績や統計を印象的に見せます。このサンプルは data-target 属性に最終値を持たせ、 IntersectionObserver で要素が画面に入ったタイミングを検知してアニメーションを開始します。
解説
カウントアップは、0 から目標値まで数字が増えていく演出で、実績や統計を印象的に見せます。このサンプルは data-target 属性に最終値を持たせ、IntersectionObserver で要素が画面に入ったタイミングを検知してアニメーションを開始します。requestAnimationFrame で経過時間に応じた値を毎フレーム計算し、終盤を緩める三次のイージング（1-Math.pow(1-p,3)）でなめらかに着地させます。一度動いたら unobserve で監視を解除するため、繰り返し再生されません。
使う場面
- 支援実績・顧客満足度などの数値アピール
- 会社概要や採用ページの「数字で見る」セクション
- サービスのダウンロード数や利用者数の提示
表示する数字は data-target の値を変えるだけです。アニメーションの長さは dur（ミリ秒）で調整します。桁ぞろえには font-variant-numeric:tabular-nums を使い、数字が動いても幅が揺れません。動きを抑えたいユーザーへ配慮するなら、prefers-reduced-motion を判定して最初から最終値を表示する分岐を加えると親切です。小数やカンマ区切りが必要な場合は計算後の整形処理を追加してください。
よくある質問
数字をスクロールするたびに何度も再生したいです。
このサンプルは一度表示したらio.unobserveで監視を解除しているため一回だけ再生されます。毎回再生したい場合は、要素が画面から外れたときにテキストを0に戻し、unobserveを呼ばないように変更してください。
カンマ区切りやパーセントの数字も表示できますか？
可能です。data-targetには数値だけを入れ、JavaScriptで計算した結果をtoLocaleStringで整形すればカンマ区切りになります。パーセントや単位は別のspan要素として数字の横に置くのがきれいです。