Softonic

Scrollender Textgenerator

Schritt 1 / 2
Weiter

Scrollende Überschriften sind eine Möglichkeit, wie Ankündigungsleisten, Aktien-Ticker und Veranstaltungsbanner viele Informationen auf einem schmalen Bildschirm präsentieren. Dieser Generator bildet den klassischen HTML <marquee>-Effekt mit einer reinen CSS-@keyframes- und transform: translateX()-Animation nach, sodass die Technik in jedem modernen Browser ohne das veraltete Tag funktioniert. Wählen Sie eine Nachricht, passen Sie die Geschwindigkeit in Sekunden pro Schleife an, legen Sie Farben und Schriftgröße fest und sehen Sie sich den Ticker live in der Vorschau an, bevor Sie ihn mit dem unten gezeigten CSS nachbauen.

So erstellen Sie ein scrollendes Banner

  1. 1

    Geben Sie die Nachricht ein

    Geben Sie die Überschrift ein. Kurze Zeilen (4-10 Wörter) lesen sich am besten auf einem bewegten Streifen.

  2. 2

    Wählen Sie die Geschwindigkeit

    Weniger Sekunden = schnelleres Scrollen. 30-60 s pro vollständiger Schleife funktioniert für Nachrichten-Ticker.

  3. 3

    Farben und Größe festlegen

    Wählen Sie eine Vordergrundfarbe für den Text, einen Hintergrund für den Streifen und eine Schriftgröße, die zu Ihrer Kopfzeilenhöhe passt.

  4. 4

    Live-Vorschau

    Die Demo animiert in Echtzeit, sodass Sie die Lesbarkeit vor dem Versand beurteilen können.

  5. 5

    In CSS nachbauen

    Kopieren Sie das unten gezeigte `@keyframes`- und `transform: translateX()`-Muster in Ihr eigenes Stylesheet, um den Ticker auf Ihrer Website nachzubilden.

Warum CSS-Animation statt <marquee>

Das <marquee>-Tag wurde in HTML5 als veraltet markiert und von WHATWG als obsolet eingestuft. Browser rendern es derzeit noch, aber Barrierefreiheitswerkzeuge und Validatoren beschweren sich, und Sie verlieren die feine Kontrolle über Easing und Schleifen. Eine transform: translateX()-Animation innerhalb von overflow: hidden bietet identisches visuelles Verhalten mit modernen Werkzeugen.

Geschwindigkeit anpassen

Die Zeit zum Durchlaufen hängt sowohl von der Dauer als auch von der Gesamtbreite ab. Eine grobe Regel für ein 1200 px großes Viewport:

Dauer Gefühl Typische Verwendung
10-20 s Schnell, aufmerksam Blitzverkäufe, dringende Warnungen
30-45 s Nachrichten-Ticker Live-Ergebnisse, Überschriftenleisten
60-90 s Ambient Veranstaltungsbeschilderung, Konferenzräume
120 s + Kaum bewegend Dekorative, Luxusmarkenbanner

Barrierefreiheits-Checkliste

  • Wickeln Sie den Streifen in role="marquee" oder aria-live="off", damit Bildschirmleser die Nachricht nicht bei jeder Schleife erneut ankündigen.
  • Respektieren Sie reduzierte Bewegung mit @media (prefers-reduced-motion: reduce) { animation: none; } und zeigen Sie den Text statisch an.
  • Halten Sie das Kontrastverhältnis mindestens 4.5:1 zwischen Text und Hintergrund; bewegender Text ist schwerer zu lesen als statischer.
  • Stellen Sie niemals kritische Informationen (rechtliche Hinweise, Preise, Fehlermeldungen) nur innerhalb eines scrollenden Streifens bereit.

Häufig gestellte Fragen

Nein. Die Vorschau ist ein <div> mit overflow: hidden und einer CSS @keyframes-Animation, die den inneren Span mit translateX bewegt. Es validiert als modernes HTML5.

Fügen Sie animation-play-state: paused im Hover-Selektor des Containers hinzu. Einige Benutzer finden dies freundlicher als eine ständige Schleife.

Ja. Ändern Sie den Endwert von @keyframes von translateX(-100%) zu translateX(100%) und starten Sie von -100%, um die Richtung umzukehren. Nützlich für RTL-Sprachen.

Nein. CSS-Transformationen laufen auf der GPU und der Text ist einfaches HTML im DOM, sodass Crawler ihn normal lesen und die Animation den Hauptthread nicht blockiert.

Alles bleibt in Ihrem Browser, während Sie eine Vorschau anzeigen. Nichts wird hochgeladen oder protokolliert.

Verwandte Tools

Benutzernamen-Generator

Erstelle Benutzernamen-Ideen aus einem Startwort, optional mit Zahlen und Trennzeichen. Praktisch für neue Konten, Gamer-Tags und Zweitprofile.

Kleiner-gleich-Zeichen

Kopiere das Zeichen ≤ und verwandte mathematische Vergleichszeichen. Enthält Unicode, HTML-Entitäten und LaTeX-Auszeichnung für Tabellenkalkulationen, wissenschaftliche Arbeiten und Webseiten.

Pfeilsymbole zum Kopieren

Kopiere gängige Unicode-Pfeile mit einem Klick: gerade, doppelte, diagonale, hakenförmige, kreisförmige und dreieckige Pfeile für Dokumente, Chats und Designs.

Firmennamen-Generator

Generiere Ideen für Firmennamen aus deiner Branche oder einem Stichwort. Kombiniert geschäftliche Vor- und Nachsilben zu 5 bis 40 Vorschlägen zum Aussortieren.

Glitch-Text-Generator

Erstelle Zalgo-artigen Glitch-Text mit kombinierenden Unicode-Zeichen. Wähle die Intensität, prüfe Varianten und kopiere beschädigt wirkenden Text für Profile, Memes oder Horror-Posts.

Städtenamen-Generator

Generiere fiktive Namen für Städte, Kleinstädte, Dörfer und Hauptstädte für Worldbuilding, Karten, Spiele, Geschichten und Testdaten, mit kurzen Notizen zu jedem Ergebnis.

Tool in anderen Sprachen verfügbar