カウントアップアニメーション
数字が0から目標値まで勢いよく増えていく「カウントアップ」演出です。実績件数や利用者数など、インパクトを出したい数値の見せ方に向いています。 data-target に終着の数値を持たせ、 requestAnimationFrame で経過時間の割合を計算しながら少しずつ表示を更新します。
解説
数字が0から目標値まで勢いよく増えていく「カウントアップ」演出です。実績件数や利用者数など、インパクトを出したい数値の見せ方に向いています。data-target に終着の数値を持たせ、requestAnimationFrame で経過時間の割合を計算しながら少しずつ表示を更新します。区切りカンマは toLocaleString で自動的に付くので、大きな数字も読みやすく表示されます。
使う場面
- 実績や導入社数などのKPIを強調するセクション
- サービス紹介ページのハイライト数値
- スクロールして初めて見える位置に置きたい統計
画面に入った瞬間に動かすため IntersectionObserver を使い、一度再生したら disconnect で監視を解除して二重再生を防いでいます。速さは dur（ミリ秒）で調整でき、長くするとゆっくり、短くすると一気に増えます。目標値は data-target を書き換えるだけです。注意点として、動きに敏感な人向けに prefers-reduced-motion の時は最初から最終値を表示する分岐を入れると配慮になります。読み上げでは途中の数字が連呼されないよう、最終値だけを伝える工夫も有効です。
よくある質問
目標の数字やアニメ速度を変えるには？
目標値はHTMLのdata-target属性を書き換えます。速度はJavaScript内のdur（ミリ秒）で、値を大きくするとゆっくり、小さくすると速くカウントアップします。
なぜスクロールしないと動かないのですか？
IntersectionObserverで要素が画面に入ったときだけ再生する設計だからです。ページ上部にあって最初から見えている場合は、読み込み直後に動き出します。一度再生すると監視を解除し、再生は一度だけです。