Marquee
跑马灯
Aliases:横向滚动广告位跑马灯无限滚动条带循环滚动横幅滚动字幕
What is it
A horizontal strip of content scrolling continuously and looping seamlessly. Used for logo walls, partner lists, announcements and promo banners — the endless flow signals abundance; it never asks users to read every item.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Logo walls showing who else trusts the product
- Announcement bars and looping promo banners
- Content far wider than the container that nobody must read in full
✕ When not to use
- Critical copy users must finish reading
- Items users need to pause on and click
- Long strips on narrow mobile screens — perceived speed worsens
Variants
Seamless
无缝拼接
Duplicate the content, translate -50% — no visible seam
Hover pause
悬停暂停
Pauses via animation-play-state so items can be read
Reverse pair
反向双条
Two strips scrolling opposite ways — editorial hero energy
Implementation
overflow: hidden@keyframes translateX 0 → -50%linear infiniteanimation-play-state: pausedDuplicate the content inside a flex container and run animation marquee Xs linear infinite, keyframes to translateX(-50%); both copies must be identical in width for a seamless loop. Duration 15–40s depending on volume, linear, never eased. Pause on hover with animation-play-state; under prefers-reduced-motion fall back to a static horizontally scrollable strip.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add a partner-logo marquee to the project's landing page. Check existing logo assets and spacing tokens first. Requirements: - Duplicate content for a seamless loop, linear motion only - Pause on hover and on focus (accessibility) - Decorative: aria-hidden, outside the accessibility reading flow - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
A visual language that lays out the page like a magazine spread: serif display headings, drop caps, hairline column rules, issue numbering and generous margins, with imagery woven into a page-turning rhythm. Black, white and grey grounds, serif-and-sans pairing — the layout tells the story, not ornament.
StylesUsed withA marketing page organized vertically around one conversion goal: nav and hero explain "what is this and why it's good", mid-sections use features and social proof (logos, testimonials, numbers) to dissolve objections, and a strong call-to-action closes. Sections follow the persuasion order — each screen answers the visitor's next question.
PagesUsed withElements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionSimilarReveals a headline line by line or word by word instead of fading the whole block in. The spoken-rhythm staggering gives copy order and weight — a staple of landing-page hero titles, section intros and scrollytelling, usually triggered once on entering the viewport.
MotionSimilar