MOVE · 移动交互
参数调改
PLAYGROUND
作用半径--radius_px
60240
让位距离--strength_px
870
跟随柔度--lerp
0.050.5
静息字色--text_color
让位字色--push_color
实现要点
NOTES- 01
拆字后一次性缓存每个字符的中心点(resize 时重测),运行期不做任何 getBoundingClientRect,循环内零测量。
- 02
推力方向 = 字符中心指向光标的反向,衰减用 (1 - d/r)² 平方衰减:近处猛让位、远处轻微涟漪,边界连续无跳变。
- 03
每帧 lerp 插值 + translate3d:让位与回弹都带惯性;只动 transform,标题约 14 个字符 ≈ 14 个小合成层,代价可忽略。
- 04
颜色按位移比例从 --text_color 混到 --push_color;写 style.color 前做 0.02 阈值去抖,避免每帧无谓重绘文字。
- 05
reduced-motion:不启动循环,文字保持完全静态;触屏无 hover,生产建议保持静态或换 touchmove 以触点为源。
- 06
预览空闲演示:静置约 3s 后虚拟光标沿文字往复扫动,用户一移动立即接管。
源代码
SOURCE
加载源代码…