MOTION HUB

文字避让

Text Repel
#text-repel · 65/72
MOVE · 移动交互

参数调改

PLAYGROUND
作用半径--radius_px
60240
px
让位距离--strength_px
870
px
跟随柔度--lerp
0.050.5
静息字色--text_color
让位字色--push_color

实现要点

NOTES
  1. 01

    拆字后一次性缓存每个字符的中心点(resize 时重测),运行期不做任何 getBoundingClientRect,循环内零测量。

  2. 02

    推力方向 = 字符中心指向光标的反向,衰减用 (1 - d/r)² 平方衰减:近处猛让位、远处轻微涟漪,边界连续无跳变。

  3. 03

    每帧 lerp 插值 + translate3d:让位与回弹都带惯性;只动 transform,标题约 14 个字符 ≈ 14 个小合成层,代价可忽略。

  4. 04

    颜色按位移比例从 --text_color 混到 --push_color;写 style.color 前做 0.02 阈值去抖,避免每帧无谓重绘文字。

  5. 05

    reduced-motion:不启动循环,文字保持完全静态;触屏无 hover,生产建议保持静态或换 touchmove 以触点为源。

  6. 06

    预览空闲演示:静置约 3s 后虚拟光标沿文字往复扫动,用户一移动立即接管。

源代码

SOURCE

加载源代码…