数字フリップカウンタ
各桁が上下にパタンと回転して数字が切り替わる、空港の発着案内板（スプリットフラップ）を思わせるカウンタです。JavaScript の setInterval で数値を進め、桁ごとに前回と文字が変わったときだけ is-changing クラスを付与。
解説
各桁が上下にパタンと回転して数字が切り替わる、空港の発着案内板（スプリットフラップ）を思わせるカウンタです。JavaScript の setInterval で数値を進め、桁ごとに前回と文字が変わったときだけ is-changing クラスを付与。CSS の @keyframes が rotateX で札がめくれる動きを作り、回転の途中で textContent を差し替えることで自然なフリップに見せています。
活躍する場面
- カウントダウンタイマーや残り時間の表示
- 達成件数・登録数などの数値を動きで強調したいとき
- スコアボードや発着案内風の演出 UI
桁数は span を増減し、JS 側のゼロ埋め（padStart）の桁数を合わせれば対応できます。色は数字の color と枠の background、回転の速さは差し替えまでの setTimeout とアニメーション時間で調整します。常時更新する用途では、動きが苦手なユーザー向けに prefers-reduced-motion でフリップを省き数値だけ更新する分岐があると親切です。
使用例・適したシーン
- 実績数字セクション
- 統計の見える化
- 達成数の演出
よくある質問
桁数を増やすことはできますか？
できます。HTML の .fn__digit を必要な桁数だけ並べ、JavaScript 側で数字を文字列にする際の padStart の桁数を同じ値に合わせてください。たとえば 4 桁なら padStart(4, '0') にします。
実際の値（カウントアップ）に連動できますか？
サンプルは一定間隔で増える例ですが、setInterval の代わりに任意のタイミングで桁を更新すれば、購入数や残り時間など実データに連動できます。更新ロジックを差し替えるだけで対応可能です。