数字ロールアップ
数字ロールアップは、縦に並べた数字を上方向へ滑らせて目的の値に着地させる、スロットのような演出です。 0123456789 を縦一列に並べた帯を overflow:hidden の枠でくり抜き、 @keyframes で translateY(-90%) まで移動させて最後の桁を表示窓に止めています。
解説
数字ロールアップは、縦に並べた数字を上方向へ滑らせて目的の値に着地させる、スロットのような演出です。0123456789 を縦一列に並べた帯を overflow:hidden の枠でくり抜き、@keyframes で translateY(-90%) まで移動させて最後の桁を表示窓に止めています。cubic-bezier のイージングで最初は速く、最後にゆっくり止まる自然な減速が付きます。
使う場面
- 料金・合計金額をインパクト付きで見せたいとき
- 実績数値やカウンターの登場演出
- ダッシュボードのKPI表示のアクセント
表示したい桁は数字帯の並びと translateY の移動量で決まるため、別の数字に着地させたい場合はその割合を計算し直します。前後の ¥ や ,000 は両脇の span をそのまま書き換えるだけです。速さは nr の 3s で調整します。なお実際の集計値を可変で出す用途には、JavaScriptで桁を生成する作りに発展させると柔軟になります。動きを抑えたい利用者には静止表示への分岐を用意すると安心です。
使用例・適したシーン
- SPA / PJAX 風 Web サイト
- ポートフォリオの遷移演出
よくある質問
表示する数字を別の値に変えられますか
縦に並べた数字の帯と、@keyframes の translateY の移動量で着地する桁が決まります。別の桁を出すには並びと移動割合を合わせて調整します。
金額の単位や桁区切りは変えられますか
両脇のspan要素に置いた記号を書き換えるだけです。先頭の通貨記号や末尾のカンマ表記を自由に差し替えられます。