MOTION HUB

磁吸列表

Magnetic List
#magnetic-list · 34/72
MOVE · 移动交互

参数调改

PLAYGROUND
作用半径--radius_px
60260
px
最大位移--max_shift_px
670
px
跟随柔度--lerp
0.040.4
行底色--row_bg
强调色--accent

实现要点

NOTES
  1. 01

    影响力按『光标到行中心的垂直距离』smoothstep 衰减(边界导数为 0,进出半径不跳变),行只在被扫过时位移,列表其余部分稳定。

  2. 02

    位移方向由光标相对列表中线的横向位置决定:t ∈ [-1,1] × max_shift × influence,整列像被光标『带』过去,而不是每行各自为政。

  3. 03

    行中心与列表矩形一次性缓存、resize 重测;每帧只写 transform 和 opacity 两个合成器属性,5-8 行成本可忽略。

  4. 04

    opacity 0.72 → 1 的明度梯度给出『哪一行最近』的次级反馈;行内箭头 hover 右移 4px 补充点击暗示(真实项目中行应为可聚焦链接)。

  5. 05

    reduced-motion:不启动循环,列表保持静态可读;键盘用户以 Tab + 焦点描边作为等价导航。

  6. 06

    预览空闲演示:静置约 3s 后虚拟光标沿列表缓慢游走,用户一移动立即接管。

源代码

SOURCE

加载源代码…