ディテールと演出 · 仕上げの小技
ナンバーティッカー数字滚动
- 変化が伝わる
- 反応的
- 明快
数値は新しい値へ飛ぶのではなく、古い値から素早く回って移ります。変化の大きさが見て取れます。
使いどころ
統計値・残高・スコアの更新に使います。毎秒何度も変わる数値には使わないでください。滲んで読めなくなります。
パラメータ
600ms · ease-out · tabular-nums keeps width stable
レシピ
ナンバーティッカー → 600ms ease-outナンバーティッカー → tabular-nums keeps width stable
AI に渡す一文
この統計数値を旧値から新値へスクロールさせてください。600ms、ease-out、tabular-nums で幅が揺れないようにします。