HOVER · 悬停交互
参数调改
PLAYGROUND
数字字号--num_size
2472
数字颜色--num_color
滚动时长--dur_ms
3002000
落位高亮--accent
缓动曲线--ease
实现要点
NOTES- 01
每位数字是一个 overflow:hidden 的固定高度窗口,内部竖排 0-9 的数字列(reel),JS 改写 reel 的 translateY 百分比实现滚动——位移用百分比(每格 10%)与字号解耦,改字号无需重算。
- 02
机械滚轮的方向感:新数字比当前小时先把目标位移加一整圈(10 格)再滚,只朝一个方向转;transitionend 后无动画归一化回第一圈并裁掉多余克隆,数字列不会无限增长。
- 03
位移跨圈前会按需克隆数字补足列长(reelEnsureLength),克隆节点不携带高亮类,避免第二圈出现假高亮。
- 04
滚动只动 transform(合成器路径),容器窗口高度由字号 calc 推导;font-variant-numeric:tabular-nums 保证等宽数字滚动时横向零抖动。
- 05
容器带 role=status + aria-live=polite,数字变化会通知读屏;reduced-motion 下过渡压到 0.01ms,数字直接落位。
- 06
dur_ms 与 ease 从 CSS 变量 getComputedStyle 读取,Playground 调参即时作用于下一次滚动。
源代码
SOURCE
加载源代码…