データ可視化・ダッシュボード
オドメーター数字ロール
各桁が縦に回転して数字が切り替わる、スロット／走行距離計のようなカウンタ。KPIや売上の更新を“動いて”見せる、count-upの上位版。
プレビュー
クリック
操作クリック／タップで動きます。
実装メモ
桁ごとに 0〜9 を縦に並べた帯を translateY でずらしています。桁数は固定(下の桁数pad)。カンマ区切りや小数を入れる場合はDOM構築を拡張してください。タップ／クリックで再ロールします。
コード（コピーして使えます）
<div class="odo-wrap">
<div class="odo" data-value="0" aria-label="カウンタ"></div>
<button class="odo-btn">ロール</button>
</div>