HTML-marquee Ersatz

Moderne Marquee-Alternative: CSS-Lauftext + Generator

`<marquee>` ist veraltet, schlecht zugänglich und in modernen Browsern nicht zukunftssicher.

Für einfache Fälle reicht CSS. Für Export, Transparenz und Produktion ist der Generator besser.

Warum `<marquee>` veraltet istCSS-keyframes BeispielGenerator-Export Workflow

Marquee-Ersatz direkt auf dieser Seite erstellen

Text, Tempo, Richtung und Stil einstellen und sofort exportieren oder einbetten.

Vorschau = ExportHorizontal / Vertikal / SchrägTransparenter oder einfarbiger HintergrundGIF · WebM · Web‑Embed
Gib hier deinen Lauftext ein (mehrzeilig, Emojis ok) 🎉 Zwischen horizontal/vertikal/schräg wechseln und Tempo, Farben und Hintergrund anpassen. Was du in der Vorschau siehst, wird genauso exportiert.

Vorlagen

Stil mit einem Klick anwenden und danach manuell weiterbearbeiten.

Cloud-Konfigurationen (Pro)

Speichere und lade vollständige Generator-Snapshots. Nur für Pro-Nutzer.

Text & Stil

Mehrzeilig, Emojis; Schrift, Farben, Hintergrund, Abstand, Ausrichtung

Noch 2599 Zeichen

Enter = neue Zeile; im vertikalen/Credits‑Modus bleiben Zeilen erhalten.

Nach Leerzeilen teilen oder Blöcke hinzufügen; frei sortieren

40px

Transparent zeigt in der Vorschau ein Schachbrettmuster; ob Transparenz exportiert wird, hängt vom Format ab (z. B. WebM, manche GIFs).

1.60

In vertikalem/Credits‑Modus nicht zu eng wählen.

Ausrichtung gilt für vertikal/schräg. Horizontaler Lauftext ist eine Zeile.

Scroll & Dauer

Richtung, Modus, Tempo, Loop/Einmal, Neigung

Ca. 5.3s
Normal
Sehr langsamNormalSchnellSehr schnell

GIFs loopen standardmäßig; Video kann N‑mal loopen oder eine Zieldauer haben.

Geschätzte Dauer: Mit Inhalt, Strecke und Tempo dauert ein Durchlauf etwa 5.3s.

Warum wurde `<marquee>` abgelöst?

`<marquee>` passt nicht zu modernen Standards für Semantik, Barrierefreiheit und Wartbarkeit. CSS-Animationen geben volle Kontrolle und sind langfristig stabiler.

Moderne CSS-Alternative

Typisch sind `@keyframes` + `animation` innerhalb eines `overflow: hidden` Containers. Damit steuern Sie Timing, Richtung und reduced-motion sauber.

Reines HTML/CSS Lauftext-Snippet

Direkt kopierbar als Ersatz für alte marquee-Lösungen.

<div class="marquee-wrap">
  <p class="marquee-text">Your scrolling text goes here</p>
</div>

<style>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: #111;
    color: #fff;
    padding: 8px 0;
  }

  .marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
  }

  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
  }
</style>

Wann der Generator die bessere Wahl ist

Wenn Sie exakte Vorschau, transparente Exporte, lange Credits, Perspektiv-Modi oder wiederverwendbaren Embed-Code brauchen.

Marquee-Alternative FAQ

Schnelle Antworten zu Migration, Accessibility und Export.

Wird `<marquee>` noch unterstützt?

Teilweise ja, aber es ist keine belastbare Basis für zukünftige Projekte.

Wie pausiere ich beim Hover?

Setzen Sie `animation-play-state: paused` auf das animierte Element.

Wie gehe ich mit reduced-motion um?

Per `prefers-reduced-motion` die Bewegung abschalten oder stark verlangsamen.

Wann sollte ich GIF/WebM exportieren?

Bei Schnitt-Workflows, Uploads und Stream-Overlays mit fixer Wiedergabe.

Bereit, Ihr altes marquee zu ersetzen?

Starten Sie mit dem Generator und passen Sie das Ergebnis gezielt für Ihre Plattform an.