marquee scroll ticker loop horizontal infinite Logo-Walls mit Partner- oder Kunden-Logos Testimonial-Ticker und Ankündigungsbanner Partner-Streifen auf Marketing-Seiten Statische Logo-Reihen wirken eingefroren Einfaches Marquee ohne JS-Bibliothek
Marquee Scroll
Fetch snippet JSON:
curl https://webspire.de/snippets/animations/marquee-scroll.json Hello, World
This element animates in
Background
Customize
Quick Start
<div class="marquee"><div class="marquee-track"><!-- items --></div><div class="marquee-track" aria-hidden="true"><!-- dupliziert --></div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 587 bytes · 34 lines
- Custom Properties
-
--marquee-duration--marquee-gap - Classes
-
.marquee.marquee-track
marquee scroll ticker loop horizontal infinite
Nutzt zwei identische Tracks (Original + Duplikat) für nahtlosen Loop. --marquee-duration steuert Geschwindigkeit, --marquee-gap den Abstand zwischen Items. Pausiert beim Hover für bessere UX.