カウントアップ数値アニメーション
これは、0から目標値まで数字がなめらかに増えていくカウントアップ演出です。表示したい数値は HTML の data-target 属性に書いておき、画面に入ったタイミングで requestAnimationFrame を使って毎フレーム値を更新します。
解説
これは、0から目標値まで数字がなめらかに増えていくカウントアップ演出です。表示したい数値は HTML の data-target 属性に書いておき、画面に入ったタイミングで requestAnimationFrame を使って毎フレーム値を更新します。進み方は easeOut（終わりに向かって減速するイージング）で計算しているため、最初は勢いよく、最後はゆっくり止まり、機械的でない自然な動きになります。発火は IntersectionObserver で見えた瞬間に限定し、一度動いたら監視を外します。
向いている場面
- 実績数・導入社数・満足度などの数字を印象的に見せる箇所
- 会社概要やサービスページの「数字で見る○○」セクション
- キャンペーンやレポートで成果を強調したいとき
到達する数字は data-target を書き換えるだけで変えられ、増えていく長さは dur（所要ミリ秒）で調整します。途中の値は Math.floor で整数に丸めているので、小数や桁区切りが必要なら表示部分に手を入れます。スクロールに入った時だけ動くので画面外では走らず軽量です。動きを抑えたい利用者には prefers-reduced-motion を見て、最終値を即表示する配慮を入れると 親切です。
使用例・適したシーン
- 実績数字セクション
- 統計の見える化
- 達成数の演出
よくある質問
表示する数字や単位は変えられますか
はい。到達する数値は各要素の data-target 属性で指定するので、そこを書き換えれば変更できます。プラスやパーセントなどの単位は隣の要素として別に置かれており、文字を直すだけです。
カンマ区切りや小数点を入れられますか
標準では整数に丸めて表示しています。3桁ごとのカンマや小数表示が必要な場合は、画面へ書き込む箇所で toLocaleString などを使って整形する数行を加えてください。