Lauftext für die Homepage kostenlos einrichten: CSS statt veralteter Elemente

Ein Lauftext für die Homepage kostet keinen Cent, denn beide technischen Wege dorthin sind kostenlos: das alte HTML-Element <marquee> und eine eigene CSS-Animation. Die Entscheidung fällt daher nicht am Preis, sondern an der Wartbarkeit des Codes und der Barrierefreiheit der Bewegung. Nach beiden Kriterien gewinnt die CSS-Variante deutlich. Die Kernfrage lautet nicht, wie Sie an einen kostenlosen Lauftext kommen, sondern wie Sie ihn so implementieren, dass er in fünf Jahren noch funktioniert und alle Nutzer erreicht.

Warum das marquee-Element ausscheidet

Der WHATWG HTML Living Standard führt <marquee> im Abschnitt zu den veralteten Funktionen auf. Webautoren sollen es nicht mehr verwenden, Browser rendern es lediglich aus Gründen der Abwärtskompatibilität. Auch MDN kennzeichnet das Element als deprecated und empfiehlt CSS-Animationen als offiziellen Ersatz.

Praktisch bedeutet das: Ihr Lauftext funktioniert in aktuellen Browsern zwar noch, aber Sie bauen auf eine Technik, die keine Spezifikation mehr pflegt. Ein weiteres gewichtiges Problem im Alltag ist die fehlende Steuerbarkeit. <marquee> bot keine saubere Möglichkeit, die Bewegung anzuhalten, was jedoch eine zentrale Anforderung der Barrierefreiheit ist.

Zur historischen Einordnung steuerte das Element sein Verhalten früher über die Attribute behavior, direction, scrollamount, scrolldelay und loop. Jede dieser Einstellungen lässt sich heute durch eine CSS-Eigenschaft ersetzen.

Die kostenlose CSS-Lösung zum Kopieren

Der empfohlene Ersatz besteht aus @keyframes in Kombination mit transform: translateX(). Die Steuerung erfolgt über animation-duration und animation-iteration-count. Sie benötigen dafür kein Plugin, kein Abo und keinen externen Generator. Zwei einfache Bausteine reichen völlig aus.

Das HTML-Markup:

<div class="lauftext">
  <div class="lauftext__inhalt">
    Heute geöffnet bis 18 Uhr. Terminvereinbarung unter 0123 456789.
  </div>
</div>

Das zugehörige CSS:

.lauftext {
  overflow: hidden;
  white-space: nowrap;
}

.lauftext__inhalt {
  display: inline-block;
  padding-left: 100%;
  animation: lauftext-links 18s linear infinite;
}

@keyframes lauftext-links {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.lauftext:hover .lauftext__inhalt,
.lauftext:focus-within .lauftext__inhalt {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .lauftext__inhalt {
    animation: none;
    padding-left: 0;
    white-space: normal;
  }
}

Die Eigenschaft padding-left: 100% schiebt den Text zunächst rechts aus dem sichtbaren Bereich heraus, damit er ordnungsgemäß hereinläuft und nicht mitten im Container startet. Der Überlauf am äußeren Element wird durch overflow: hidden abgeschnitten.

Tempo, Richtung und Pause steuern

Alles, was früher über HTML-Attribute geregelt wurde, steuern Sie heute in CSS über eine dedizierte Eigenschaft:

Für das Tempo gilt eine einfache Faustregel: Je länger der Text, desto größer muss die Dauer gewählt werden, da andernfalls die Geschwindigkeit unleserlich ansteigt. Testen Sie die Animation immer mit Ihrem längsten realistischen Satz.

Mit animation-play-state: paused hält die CSS-Animation bei :hover oder :focus an, komplett ohne JavaScript. Das ist der entscheidende technische Vorteil gegenüber dem veralteten HTML-Element.

Die Pflichtübung: WCAG 2.2.2 und prefers-reduced-motion

Hier liegt der eigentliche Grund, warum ein Lauftext mehr Nachdenken erfordert, als sein Preis vermuten lässt. Das Erfolgskriterium 2.2.2 der WCAG, betitelt “Pause, Stop, Hide”, verlangt eine Möglichkeit zum Anhalten, Stoppen oder Ausblenden, sobald eine Bewegung drei Bedingungen erfüllt: Sie startet automatisch, sie läuft länger als fünf Sekunden, und sie wird parallel zu anderen Inhalten dargestellt. Ein dauerhaft laufender Lauftext erfüllt alle drei Kriterien. Sie haben damit zwei saubere Lösungswege:

1. Begrenzen. Setzen Sie animation-iteration-count so, dass die Bewegung innerhalb von fünf Sekunden endet und der Text danach stehen bleibt.
2. Steuerbar machen. Lassen Sie den Text endlos laufen, aber geben Sie eine erreichbare Pause frei. Die Hover- und Focus-Regel aus dem Code-Beispiel bildet die Basis. Wer es vollständig nutzerfreundlich lösen will, ergänzt eine sichtbare Bedienmöglichkeit, da ein Hover auf Touchgeräten nicht existiert.

Unabhängig davon gehört die Media Query prefers-reduced-motion in jede Umsetzung. Sie signalisiert, dass ein Nutzer im Betriebssystem reduzierte Bewegung angefordert hat. Animationen sollen dann abgeschaltet oder stark reduziert werden. Im Code-Beispiel oben fällt der Text in diesem Fall auf normalen, umbrechenden Fließtext zurück und bleibt vollständig lesbar.

Der rechtliche Rahmen in Deutschland schärft diese Anforderungen seit dem 28. Juni 2025 weiter zu. Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet betroffene Anbieter digitaler Dienstleistungen zur barrierefreien Gestaltung. Ob Ihr spezifisches Angebot darunterfällt, ist eine juristische Einzelfallprüfung. Die technische Antwort kostet in jedem Fall nur drei zusätzliche Zeilen CSS.

Einbau in WordPress und TYPO3

In WordPress legen Sie das CSS am besten im Customizer unter “Zusätzliches CSS” ab oder alternativ in der style.css Ihres Child-Themes. Das HTML-Markup fügen Sie über einen Custom-HTML-Block im Editor ein. Der normale Absatz-Editor formatiert eingefügtes HTML gelegentlich um, der HTML-Block verhindert dies.

In TYPO3 gehört das Markup in ein Fluid-Template oder in ein Inhaltselement vom Typ “Reiner HTML-Code”. Das CSS binden Sie über die bestehende Stylesheet-Datei Ihres Site-Packages ein. Vermeiden Sie Inline-Styles am Element selbst, da sich diese später nicht zentral ändern lassen.

In beiden Systemen gilt der gleiche Wartungsgrundsatz: Klassenname und Stylesheet gehören an einen zentralen Ort. Wer das CSS direkt in ein einzelnes Inhaltselement kopiert, muss den Code bei Anpassungen auf jeder Seite einzeln pflegen.

Suchmaschinen und Nebenwirkungen

Kurz und entwarnend: Der Text innerhalb eines CSS-animierten Containers bleibt normaler DOM-Text. Die Transformation verändert lediglich die visuelle Darstellung, nicht den Dokumentinhalt. Crawler lesen den Lauftext daher wie jeden anderen Absatz Ihrer Website. Eine Nebenwirkung sollten Sie dennoch kennen: Dauerhafte Animationen erzeugen fortlaufend Repaints im Browser, was auf leistungsschwachen Geräten spürbar werden kann. Auf Mobilgeräten bricht ein langer Lauftext zudem nicht um, sondern läuft weiter, weshalb die prefers-reduced-motion-Regel dort besonders nützlich ist.

Fazit

Kostenlos sind beide Wege. Das Element <marquee> ist jedoch abgekündigt, kaum steuerbar und erzeugt langfristige Wartungsschulden. Die CSS-Animation aus @keyframes, transform: translateX() und animation-play-state kostet ebenfalls nichts, lässt sich in Tempo, Richtung und Pause exakt steuern und erfüllt mit wenigen zusätzlichen Regeln die Anforderungen aus WCAG 2.2.2 und prefers-reduced-motion. Kopieren Sie den gezeigten Code-Block, passen Sie die Dauer an Ihren längsten Text an, und die technische Entscheidung ist endgültig zugunsten einer modernen Lösung getroffen.