Seamless Marquee

A row of content scrolls forever with no visible seam

All platformsMotion & BackgroundsContent areaEffect

Live preview (drag the parameters, watch it change)

Duration 18s Gap 32px Direction left

Code

<div class="marquee"><div class="marquee-track">
  <span>条目一</span><span>条目二</span><!-- …再复制一份完全相同的内容… -->
</div></div>
<style>
.marquee { overflow: hidden; }
.marquee-track {
  display: flex; gap: 32px; width: max-content;
  animation: marquee 18s linear infinite ;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
</style>

<div class="overflow-hidden"><div class="flex w-max animate-[marquee_18s_linear_infinite] gap-[32px] hover:[animation-play-state:paused]">…×2…</div></div>
<!-- tailwind.config 里补 keyframes: marquee: { to: { transform: 'translateX(-50%)' } } -->

export function Marquee({ items }) {
  const seq = [...items, ...items];
  return (<div style={{ overflow: "hidden" }}>
    <div className="marquee-track">{seq.map((t, i) => <span key={i}>{t}</span>)}</div>
    <style>{`.marquee-track{display:flex;gap:32px;width:max-content;animation:marquee 18s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}`}</style>
  </div>);
}

Code snippets are MIT-licensed — copy and adapt freely.

How this effect works

它是怎么工作的（中文）

秘诀是内容复制两份并排，轨道动画平移 -50% 后瞬间归位——因为后半段和前半段长得一模一样，跳回去也看不出来。速度用「每份内容的宽度 ÷ 期望时长」算，别写死。鼠标悬停暂停是基本礼貌；重要信息不要只放在跑马灯里。

How it works (English)

Duplicate the content twice side by side, animate the track to -50%, then snap back — the second half looks identical to the first, so the jump is invisible. Compute duration from one copy's width instead of hardcoding it. Pause on hover is basic courtesy, and never put critical information only in a marquee.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

Matching prompt

Seamless Marquee PromptStale · →