カウントアップ数字アニメーション
これは数字が 0 から目標値まで勢いよく増えていくカウントアップ演出です。各 span の data-target に最終値を持たせ、 requestAnimationFrame で経過時間の割合を計算しながら Math.floor で表示を更新します。
解説
これは数字が 0 から目標値まで勢いよく増えていくカウントアップ演出です。各 span の data-target に最終値を持たせ、requestAnimationFrame で経過時間の割合を計算しながら Math.floor で表示を更新します。toLocaleString() を通すので大きな数字には桁区切りが入ります。発火のきっかけは IntersectionObserver で、グリッドが画面に 3 割ほど入った瞬間に一度だけ動き、その後 disconnect() で監視を切るため、スクロールで戻っても二度と数え直しません。
使う場面
- 実績数や満足度を見せる会社紹介やサービス紹介のセクション
- 導入社数・利用者数などの数値を印象づけたいランディングページ
- ダッシュボードで主要指標を登場時に強調したいとき
表示したい値は data-target、増える速さは countUp へ渡す所要ミリ秒（既定は 1500）で調整します。発火位置は threshold の値で前後できます。注意点として、演出が苦手な利用者向けに prefers-reduced-motion を見て即座に最終値を表示する分岐を足すと親切です。% や年数などラベルは別の small 要素に分けてあるので、単位は数字と独立して自由に書けます。
使用例・適したシーン
- 実績数字セクション
- 統計の見える化
- 達成数の演出
よくある質問
表示する数値はどこで変えますか？
各数字の span に付いている data-target の値を書き換えます。スクリプトはその値を目標としてカウントアップするので、JavaScript を編集する必要はありません。
画面に入る前から数えてしまわないか心配です。
大丈夫です。IntersectionObserver でグリッドが画面に入ったことを検知してから開始し、一度動いたら監視を解除するので、表示前に数えたり繰り返したりしません。