MOVE · 移动交互
参数调改
PLAYGROUND
作用半径--radius_px
60260
最大位移--max_shift_px
670
跟随柔度--lerp
0.040.4
行底色--row_bg
强调色--accent
实现要点
NOTES- 01
影响力按『光标到行中心的垂直距离』smoothstep 衰减(边界导数为 0,进出半径不跳变),行只在被扫过时位移,列表其余部分稳定。
- 02
位移方向由光标相对列表中线的横向位置决定:t ∈ [-1,1] × max_shift × influence,整列像被光标『带』过去,而不是每行各自为政。
- 03
行中心与列表矩形一次性缓存、resize 重测;每帧只写 transform 和 opacity 两个合成器属性,5-8 行成本可忽略。
- 04
opacity 0.72 → 1 的明度梯度给出『哪一行最近』的次级反馈;行内箭头 hover 右移 4px 补充点击暗示(真实项目中行应为可聚焦链接)。
- 05
reduced-motion:不启动循环,列表保持静态可读;键盘用户以 Tab + 焦点描边作为等价导航。
- 06
预览空闲演示:静置约 3s 后虚拟光标沿列表缓慢游走,用户一移动立即接管。
源代码
SOURCE
加载源代码…