MOTION HUB

数字滚动

Odometer
#odometer · 39/72
HOVER · 悬停交互

参数调改

PLAYGROUND
数字字号--num_size
2472
px
数字颜色--num_color
滚动时长--dur_ms
3002000
ms
落位高亮--accent
缓动曲线--ease

实现要点

NOTES
  1. 01

    每位数字是一个 overflow:hidden 的固定高度窗口,内部竖排 0-9 的数字列(reel),JS 改写 reel 的 translateY 百分比实现滚动——位移用百分比(每格 10%)与字号解耦,改字号无需重算。

  2. 02

    机械滚轮的方向感:新数字比当前小时先把目标位移加一整圈(10 格)再滚,只朝一个方向转;transitionend 后无动画归一化回第一圈并裁掉多余克隆,数字列不会无限增长。

  3. 03

    位移跨圈前会按需克隆数字补足列长(reelEnsureLength),克隆节点不携带高亮类,避免第二圈出现假高亮。

  4. 04

    滚动只动 transform(合成器路径),容器窗口高度由字号 calc 推导;font-variant-numeric:tabular-nums 保证等宽数字滚动时横向零抖动。

  5. 05

    容器带 role=status + aria-live=polite,数字变化会通知读屏;reduced-motion 下过渡压到 0.01ms,数字直接落位。

  6. 06

    dur_ms 与 ease 从 CSS 变量 getComputedStyle 读取,Playground 调参即时作用于下一次滚动。

源代码

SOURCE

加载源代码…