差分の桁だけ回る数字
桁ごとに 0〜9 を縦に並べた帯をずらして表示する数字スロット。値を更新すると変わった桁だけが回り、変わらない桁は静止するので、どこが動いたかが一目で分かる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 全桁を回すと「数字が変わった」しか伝わらない。変わった桁だけ回すと「どの桁がどれだけ変わったか」が読める
- 上位桁ほど遅く（+40ms ずつ）止めると、繰り上がりが右から左へ伝わって見える。全桁同時だと機械の表示板になる
- 帯は translateY で動かし、font-variant-numeric: tabular-nums で桁幅を固定する。幅が揺れると隣の桁まで動いて見える
コード（コピーして使えます）
<div class="ns-wrap">
<div class="ns-card">
<p class="ns-cap">本日の処理件数</p>
<div class="ns-num" id="nsNum" aria-live="polite" aria-atomic="true"></div>
<p class="ns-read" id="nsRead">回った桁: —</p>
</div>
<div class="ns-bar">
<button class="ns-btn" type="button" data-add="1">+1</button>
<button class="ns-btn" type="button" data-add="10">+10</button>
<button class="ns-btn" type="button" data-add="1000">+1,000</button>
<button class="ns-btn ns-btn--ghost" type="button" data-add="random">ランダム</button>
</div>
</div>