Laufschrift auf Webseiten ist auch so ein No-Go, ähnlich wie Hintergrundmusik.
Viele kennen das noch von den 90er Jahren als viele Seite Laufschrift Banner hatten.
Beides nervt, und kann schnell Besucher vergraulen.
Ein Einsatz von solchen Lauftexten sollte demnach gut bedacht werden, und auf Anwendungsfälle beschränkt bleiben, bei denen dadurch ein Zusatznutzen für den Besucher generiert wird.
So erstellen Sie Lauftexte
Methode 1
Am Besten benutzen Sie valides HTML und CSS, und dann läuft es ruckelfrei in allen Browsern. Zum Anhalten einfach mit der Maus über die Laufschrift fahren.
Der HTML-Code:
<div id="marquee" class="marquee"><span>Methode 1: Laufschrift - valides HTML und CSS, und ruckelfrei auch im Firefox.</span></div>
Das CSS:
<style>
.marquee {
max-width: 100vw; /* iOS braucht das */
white-space: nowrap;
overflow: hidden;
/* hier evtl. noch font-size, color usw. */
}
.marquee span {
display: inline-block;
padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
animation: marquee 10s linear infinite;
}
/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
.marquee span:hover {
animation-play-state: paused
}
/* Make it move */
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
Ein Detail fehlt noch: Weil die Scroll-Geschwindigkeit, anders als beim HTML-Tag <marquee>, nicht vom Browser bestimmt wird, und auch im CSS nicht direkt als Geschwindigkeit angegeben wird, sondern als Dauer für einen Durchlauf - im Beispiel: 10s entsprechend 10 Sekunden -, würde die Schrift je nach Länge des Textes schneller oder langsamer laufen.
Da andererseits der Text häufig nicht statisch vorgegeben ist, sondern variable Länge hat (Beispiel: Vom Besucher eingegebener Text im SMS2Web-Ticker), muss noch mit ein wenig JavaScript nachgebessert werden:
<script>
if (document.getElementById("marquee")) {
var laufschrift = document.getElementById("marquee");
len = laufschrift.innerHTML.length;
var nodes = document.getElementById('marquee').getElementsByTagName("span");
for(var i=0; i<nodes.length; i++) { // weil jeder whitespace als child zählt
nodes[i].style.animationDuration = len/10 +"s";
}
}
</script>
Der Teiler "10" im Ausdruck len/10 entscheidet dabei über die Geschwindigkeit. Je größer, desto schneller.
Methode 2
Die ältere Methode, Laufschrift zu erzeugen:
Dies ist eine Laufschrift, erzeugt mit dem HTML-Tag <marquee>
Wenn die obige Laufschrift nicht ruckelt, sondern richtig schön gleichmäßig läuft, dann nutzen Sie vermutlich den Chrome-Browser. Sie können also gar nicht nachvollziehen, wie schlimm <marquee> in anderen Browsern aussieht.
Der HTML-Code:
<marquee>Dies ist eine Laufschrift</marquee>
Der Nachteil dabei:
In den meisten Browsern (außer Chrome / Opera) ruckelt die Laufschrift ganz fürchterlich.
Das <marquee>-Tag ist kein gültiges HTML
Alle Chromium-basierten Browser, also Chrome, Edge, Brave und Opera u.a., haben einen merkwürdigen Bug, der bei Laufschrift mit mehr als ca. 500 Zeichen (incl. Leerschritte) zu Aussetzern führt. Interessanterweise gilt diese Grenze unabhängig davon, mit welcher Technik die Laufschrift erzeugt wird, ob mit nativem marquee, CSS oder JavaScript.
Fazit:
Mit ein paar Zeilen CSS und JavaScript endlich Laufschrift, die in allen Browsern angenehm ruhig läuft.