CP Registry

Marquee

Kontinuierlich horizontal scrollender Streifen — CSS-only, nahtloser Loop, pausiert bei Hover und bei prefers-reduced-motion. Für News-Ticker, Logo-Cloud, Themen-Tags.

News-Ticker mit Live-Daten

Klima-Ticker mit Fade-Maske

Mit Gradient-Maske an den Raendern, mittlere Geschwindigkeit, Pause bei Hover.

14.200 Ladevorgänge heute • CO₂ gespart: 8,4 t • 187 Förderanträge bewilligt • Nächste Bürgersprechstunde: 14. Mai 
<Marquee speed="medium" gradient pauseOnHover>
  <span class="ticker-item">14.200 Ladevorgänge heute</span>
  <span class="ticker-dot">•</span>
  <span class="ticker-item">CO₂ gespart: 8,4 t</span>
  <span class="ticker-dot">•</span>
  <span class="ticker-item">187 Förderanträge bewilligt</span>
  <span class="ticker-dot">•</span>
  <span class="ticker-item">Nächste Bürgersprechstunde: 14. Mai</span>
</Marquee>

Themen-Tags

Tag-Marquee — schnellere Geschwindigkeit

#Solar #Lastenrad #Quartiersstrom #KfW #ePKW #Wärmepumpe 
<Marquee speed="fast" gradient gap="1rem">
  <span class="tag-pill">#Solar</span>
  <span class="tag-pill">#Lastenrad</span>
  <span class="tag-pill">#Quartiersstrom</span>
  <span class="tag-pill">#KfW</span>
  <span class="tag-pill">#ePKW</span>
  <span class="tag-pill">#Wärmepumpe</span>
</Marquee>

Geschwindigkeiten

Slow

Slow — 40s pro Loop, gut für wichtige Inhalte • Förderaufruf 2026 startet am 1. Februar 
<Marquee speed="slow" gradient>...</Marquee>

Richtung umkehren

Rückwärts — für dekorative Stripes • VRR — Stadtwerke Muenster — RVK — KfW — BMUV 
<Marquee speed="medium" direction="right" gradient>...</Marquee>

Redakteurshinweise

Wann einsetzen

  • Live-Tickers für KPIs (Ladevorgänge, eingesparte Tonnen)
  • Logo-Cloud-Variante für Förderer/Partner
  • Themen-Pillen-Strip über dem Newsroom
  • Aufmerksamkeitsstreifen oben/unten auf Landingpages

Inhalts-Empfehlungen

  • Trenner zwischen Items — Punkt, Pipe, Icon
  • Inhalte müssen sinnvoll sein — kein "Hello World"-Ticker
  • Speed: slow für Lesetext, fast für Tags/Logos
  • Gradient an den Raendern empfohlen

Mobile & A11y

  • prefers-reduced-motion: Animation pausiert
  • Inhalt zusätzlich als sr-only ohne Animation für Screen-Reader
  • Pause on hover — wichtige Info kann gelesen werden
  • Mobile: Inhalte müssen ohne Cropping lesbar sein

Pitfalls

  • Keine wichtigen CTAs in den Marquee — werden übersehen
  • Nicht zu viele Items — der Loop wird zu lang
  • Nicht über Hauptinhalt platzieren
  • Keine interaktiven Elemente in der Marquee — schwer klickbar

Installation

cp-components add marquee