Back to Details

marquee-loop

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Marquee Skill

Marquee 跑马灯实现技巧

Use When

使用场景

  • A design needs a seamless infinite loop for logos, testimonials, screenshots, tags, or short feature chips.
  • 当设计需要为logo、客户评价、截图、标签或简短功能芯片实现无缝无限循环效果时使用。

Workflow

实现步骤

  1. Duplicate the item sequence so the end and beginning match perfectly.
  2. Animate the track with a linear transform from 0 to -50%.
  3. Keep item widths stable to prevent jumps during the loop.
  4. Mask or fade the edges when the marquee enters or exits a section.
  5. Pause or slow the marquee on hover only when interaction is useful.
  6. Respect prefers-reduced-motion with a static wrap or very slow movement.
  1. 复制元素序列，使首尾完美衔接。
  2. 为轨道添加从0到-50%的线性变换动画。
  3. 保持元素宽度稳定，避免循环过程中出现跳动。
  4. 当跑马灯进入或离开某个区域时，对边缘进行遮罩或淡入淡出处理。
  5. 仅在需要交互时，才在鼠标悬停时暂停或减慢跑马灯速度。
  6. 遵循prefers-reduced-motion设置，提供静态展示或极慢的移动效果。

Guardrails

注意事项

  • Do not animate unique content that users must read carefully.
  • Do not use large CPU-heavy shadows or filters on every moving item.
  • 不要对用户需要仔细阅读的独特内容添加动画。
  • 不要在每个移动元素上使用占用大量CPU的大型阴影或滤镜。