JavaScripts › Texteffekte

Lauftext

Schiebt eine Textzeile ruckelfrei durchs Bild — der zeitgemäße Ersatz für das ausgestorbene Marquee-Tag, mit Pause beim Darüberfahren.

Der Lauftext ist so alt wie das Web: eine Zeile, die gemächlich von rechts nach links durchs Bild zieht. Zwanzig Jahre lang gab es dafür ein eigenes HTML-Element, <marquee>. Es war nie Teil eines Standards, funktionierte trotzdem überall — und ist inzwischen aus allen Browsern verschwunden oder auf dem Weg dorthin. Wer den Effekt heute möchte, baut ihn selbst. Genau das tut dieses Script, und zwar mit einigen Vorteilen gegenüber dem alten Element.

Stellt Text, Richtung und Tempo ein. Das Tempo wird in Pixeln pro Sekunde angegeben, nicht in Bildschritten — das ist der entscheidende Unterschied: Der Lauf ist dadurch auf jedem Gerät gleich schnell, egal ob der Bildschirm 60 oder 144 Bilder je Sekunde darstellt. Fahrt mit der Maus über die Laufzeile, und sie hält an; nehmt ihr die Maus weg, läuft sie weiter. Das war beim alten Element mühsam nachzurüsten und ist hier eingebaut, denn nichts ist ärgerlicher, als einer Nachricht hinterherlesen zu müssen.

Sinnvoll ist ein Lauftext für kurze, aktuelle Hinweise: geänderte Öffnungszeiten, ein Terminhinweis, eine Störungsmeldung. Für alles, was länger als ein Satz ist, taugt er nicht — bewegter Text ist anstrengend zu lesen und für manche Menschen sogar schwer erträglich. Deshalb achtet das Script auf die Systemeinstellung „Bewegung reduzieren": Wer sie im Betriebssystem gesetzt hat, bekommt den Text ruhig stehend zu sehen statt in Bewegung.

Verwandtes in dieser Abteilung: Der Schreibmaschinen-Effekt lässt Text sich selbst tippen, der definierbare Countdown blendet Meldungen nacheinander ein. Wer bewegten Text nicht als Zierde, sondern als Uhr braucht, findet in der Abteilung Zähler die passenden Skripte.

Texteffekte Baujahr 2026 läuft in deinem Browser

Fahrt mit der Maus über die Zeile — sie hält an, solange ihr darauf zeigt.

Script von kostenlose-javascripts.de

So funktioniert das Script

Der Lauftext ist eine Animation, und Animationen im Browser folgen alle demselben Muster: Eine Funktion wird vor jedem neuen Bild aufgerufen, rechnet die Position ein Stück weiter und setzt sie. Der Rest sind Feinheiten, die über flüssig oder ruckelig entscheiden.

requestAnimationFrame(schritt);

Diese Zeile ist das Herz. requestAnimationFrame bittet den Browser: „Ruf mich auf, bevor du das nächste Bild zeichnest." Das ist deutlich besser als ein Wecker mit setInterval, der stur alle 20 Millisekunden feuert — der träfe nämlich nie genau den Zeitpunkt des Bildaufbaus, was als Ruckeln sichtbar wird. Außerdem hält der Browser die Animation von selbst an, wenn der Reiter im Hintergrund liegt, was Akku spart.

const vergangen = (zeit - letzteZeit) / 1000;
const strecke = tempo() * vergangen;
position += nachLinks() ? -strecke : strecke;

Hier steckt der wichtigste Gedanke des ganzen Scripts. Der naive Weg wäre, die Position bei jedem Bild um eine feste Pixelzahl zu erhöhen — dann liefe der Text auf einem 144-Hertz-Bildschirm mehr als doppelt so schnell wie auf einem 60-Hertz-Gerät. Stattdessen bekommt die Funktion vom Browser die aktuelle Zeit übergeben; aus der Differenz zum letzten Bild ergibt sich, wie viele Sekundenbruchteile vergangen sind, und daraus die tatsächlich zurückzulegende Strecke. Das Tempo ist damit eine echte Geschwindigkeit und keine Bildschirmeigenschaft.

laeufer.style.transform = "translateX(" + position + "px)";

Bewegt wird über transform und nicht über left oder margin. Der Unterschied ist für das Auge groß: Eine Verschiebung per transform kann der Browser der Grafikkarte überlassen, ohne die Seite neu zu berechnen. Ändert man dagegen left, muss bei jedem Bild das gesamte Layout neu vermessen werden. Der Hinweis will-change: transform im Stylesheet sagt dem Browser vorab, dass sich hier etwas bewegen wird.

if (nachLinks() && position < -laeufer.offsetWidth) {
  position = rahmen.offsetWidth;
}

Der Umbruch: Sobald der Text vollständig links hinausgelaufen ist — seine Position also weiter links liegt als seine eigene Breite —, wird er rechts außerhalb des Rahmens wieder angesetzt. offsetWidth ist dabei die tatsächliche Breite eines Elements in Pixeln, die der Browser gemessen hat. Für die andere Richtung gilt dasselbe spiegelbildlich.

const ruhig = window.matchMedia &&
  window.matchMedia("(prefers-reduced-motion: reduce)").matches;

matchMedia fragt aus dem Script heraus dieselben Bedingungen ab, die man sonst im Stylesheet abfragt. „Bewegung reduzieren" ist eine Einstellung, die Betriebssysteme anbieten und die vor allem Menschen setzen, denen Bewegung auf dem Bildschirm körperlich zusetzt. Ist sie gesetzt, überspringt die Funktion die Positionsänderung — der Text bleibt stehen und ist trotzdem vollständig lesbar. Das ist eine Zeile Aufwand und macht den Unterschied zwischen einem Effekt, der niemanden ausschließt, und einem, der es tut.

Zum Anpassen: Für einen Lauftext, der ohne Lücke läuft, schreibt ihr den Inhalt zweimal hintereinander in den Läufer und setzt die Position schon dann zurück, wenn die erste Hälfte durchgelaufen ist. Soll der Text stehen bleiben statt neu anzusetzen, entfernt ihr einfach die beiden Umbruch-Abfragen.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Texteffekte