Sie haben JavaScript deaktiviert. Vermutlich sind Sie ein Kollege und wollen nur sehen, ob meine Website auch ohne JavaScript funktioniert.
Andernfalls: Bitte aktivieren Sie JavaScript!

webdesign weisshart Startseite

zurück zum Standard-Style

Sie sind hier: Startseite · Artikel · marquee ohne Ruckeln

marquee - Laufschrift ohne Ruckeln, auch im Firefox

Hinweis:
Dieser Artikel ist älter als 18 Monate / wurde seit 18 Monaten nicht aktualisiert. Dies kann (muss aber nicht) dazu führen, dass der Artikel, und / oder darin beschriebene Techniken, nicht mehr aktuell sind. Bitte berücksichtigen Sie diesen Hinweis bei der Lektüre.

Laufschrift auf Webseiten ist auch so ein No-Go, ähnlich wie Hintergrundmusik. Beides nervt, und kann schnell Besucher vergraulen. Ein Einsatz sollte demnach gut bedacht werden, und auf Anwendungsfälle beschränkt bleiben, bei denen dadurch ein Zusatznutzen für den Besucher generiert wird.

Die herkömmliche Weise, Laufschrift zu erzeugen (Demo 1):

Demo 1: Dies ist eine Laufschrift, erzeugt mit dem HTML-Tag <marquee>

Der HTML-Code:

<marquee>Dies ist eine Laufschrift</marquee>

Der Nachteil dabei:

Die bessere Lösung (Demo 2):

Demo 2: Auch dies ist Laufschrift - aber diesmal valides HTML und CSS, und ruckelfrei in allen Browsern. Zum Anhalten einfach mit der Maus über die Laufschrift fahren.

Der HTML-Code:

<div id="marquee" class="marquee"><span>Demo 2: Auch dies ist Laufschrift - aber diesmal 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: translate3d(0,0,0);} 100% {transform: translate3d(-100%,0,0);} } </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.

Fazit

Mit ein paar Zeilen CSS und JavaScript endlich Laufschrift, die in allen Browsern angenehm ruhig läuft.

Nachtrag 22.03.2021

Alle Chromium-basierten Browser, also Chrome, Edge und Opera u.a., haben einen merkwürdigen Bug (oder ist es ein Feature?), 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.

Creative Commons Lizenzvertrag

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.

21 Kommentare

  1. MisterNoName schrieb am Donnerstag, 12.09.19 10:01 Uhr:

    Gute Arbeit. Vielen Dank!

  2. Friedhelm schrieb am Donnerstag, 02.04.20 11:27 Uhr:

    Wie und wo füge ich das jetzt ein?

    Die Demo 1 kann ich direkt in den css Code der Seite einfügen.

    Das geht bei Demo 2 nicht.

  3. Henning Hahn schrieb am Mittwoch, 15.04.20 13:13 Uhr:

    super Tool,
    langsamere Laufschrift funktioniert (zumindest bei mir) nicht im IE.

  4. Fritz schrieb am Mittwoch, 15.04.20 13:28 Uhr:

    @Henning Hahn
    Das stimmt. Und es trifft auf die meisten hier vorgestellten modernen Techniken zu. Es macht m.E. auch wenig Sinn, mit zusätzlichem Aufwand diesen Dino zu unterstützen. Wer, aus welchen Gründen auch immer, noch den IE verwendet / verwenden muss, wird vermutlich gar nicht bemerken, dass die Darstellung vieler Seiten unvollständig ist. Weil er es nicht anders kennt.

  5. Lin schrieb am Freitag, 05.06.20 12:58 Uhr:

    Viel besser als mit dem <marquee>-Tag ! Aber leicht ruckelt es im Firefox immer noch. Allerdings habe ich eine Bildlaufleiste kostruiert.
    Obwohl ich (noch) keine JavaScript-Kenntnisse habe, war die Umsetzung dank der verständlichen Erklärung einfach.

  6. stephan geissler schrieb am Montag, 27.07.20 01:00 Uhr:

    demo 2 läuft super...auch auf dem iphone... www.stephangeissler.de

  7. Reiner schrieb am Sonntag, 24.01.21 15:23 Uhr:

    Hallo, funktioniert super. Nur die Laufschrift hat nach jedem Wort einen Umbruch. Somit wird der Lauftext Mehrspaltig. Für mich habe ich das so gelöst das ich nach jeden Wort dieses eingefügt "&#8209;" habe, das verhindert den Umbruch. Vieleicht hat auch jemand eine andere Lösung.
    Gruß Reiner

  8. Fritz schrieb am Sonntag, 24.01.21 18:43 Uhr:

    @Reiner
    Merkwürdig. Mehrspaltig? Du meinst mehrzeilig? Aber woher der Umbruch kommt, würde mich doch interessieren. Ich würde das gerne untersuchen. Bitte im Supportforum Details posten: https://forum.weisshart.de/
    Dort helfe ich gerne.

  9. Juliane schrieb am Mittwoch, 03.02.21 09:15 Uhr:

    @Reiner @Fritz, ich hab das selbe Problem, meine Laufschrift hat auch nach jedem Wort einen Umbruch!

  10. :Josef schrieb am Freitag, 04.06.21 23:37 Uhr:

    wollte zwei Lauftexte mit je einem Link einbauen. Wie kriege ich es hin, dass beide mit ein paar Leerschlägen Abstand AUF EINER ZEILE bleiben?

  11. Fritz schrieb am Samstag, 05.06.21 12:32 Uhr:

    @:Josef
    Hm, und wo ist das Problem? Wieso zwei Lauftexte (= zwei marquee-Tags)? Warum nicht einfach deine beiden Texte "mit ein paar Leerschlägen Abstand" in ein marquee-Tag schreiben?

  12. EnnyLennox schrieb am Freitag, 21.01.22 02:47 Uhr:

    Vielen Dank, funktioniert super und schont die Augen sehr :)

  13. EINNEULING schrieb am Freitag, 11.03.22 08:23 Uhr:

    bin begeistert über augenschonende Laufschrift - habe ich sonst immer gegen Laufschrift entschieden, da das ruckeln unmöglich ausschaut
    habe leider nicht so viel Ahnung von CSS und würde mich über mehr Gestaltungsmöglichkeiten freuen.
    Ich habe es nicht hinbekommen, dass die Schrift mit Hintergrund und anderer Farbe bzw. Größe erscheint
    bei marquee gibt es die Möglichkeit "behavior=alternate" einzubauen, sodass der Text hin und her geschubst wird. Geht das hier auch?
    Würde mich freuen

  14. Tanja schrieb am Freitag, 20.01.23 09:07 Uhr:

    Hallo,
    habe es bei Joomla versucht, aber dann bekomme ich im Frontend über der Navi Infos zum Template und Schriften angezeigt. Woran könnte das liegen?

  15. Frieder schrieb am Freitag, 27.01.23 23:27 Uhr:

    @Tanja
    Je nach dem welcher Editor in Joomla verwendet wird "bereinigt" er die Eingabe und zeigt den Code, nicht das Ergebnis,
    Frag mal im Joomla - Forum.

  16. Kathi schrieb am Dienstag, 28.03.23 17:45 Uhr:

    Hallo,
    ich habe eine Bilderleiste erstellt. Was muss ich anpassen, damit es durchgehend läuft, also ohne Abstand zum Anfang.
    Vielen Dank.

  17. Fritz schrieb am Dienstag, 28.03.23 18:03 Uhr:

    @Kathi Ich sehe nicht, wie das mittels marquee zu lösen wäre. Nutze einen der zahlreichen Slider, die du im Web findest. Mein Favorit ist übrigens slick. Demo hier: https://webdesign.weisshart.de/slick.php

  18. Michael schrieb am Donnerstag, 13.06.24 11:05 Uhr:

    Hallo.
    Funktioniert immer noch, und ist auch für Laien nutzbar. Super!
    Eine Frage hätte ich: Ist es möglich, einen Timer einzubauen, durch den die Laufschrift zu einem bestimmten Zeitpunkt abgeschaltet wird. (Ich nutze das nur gelegentlich für aktuelle Ankündigungen; wenn die Veranstaltung vorbei ist, kann die Laufschrift wieder verschwinden.)
    Danke. :)

  19. Brossi schrieb am Freitag, 12.07.24 22:53 Uhr:

    Hallo,
    ist es möglich 2 verschiedene Laufleisten einzustellen? mir geht es darum das die Laufleisten verschiedene Geschwindigkeiten bekommen würden. Ansosten finde ich die Beschreibung sehr gut.

  20. Fritz schrieb am Samstag, 13.07.24 14:17 Uhr:

    @Brossi
    klar, das sollte ohne weiteres möglich sein.
    Wenn du dazu Genaueres wissen willst, siehe ("Wenn Sie aber Fragen haben ...")

  21. Brossi schrieb am Mittwoch, 17.07.24 22:35 Uhr:

    @Fritz
    Deine Antwort versteh ich nicht bzw. finde ich nicht "Wenn Sie aber Fragen haben..."

Über Ihren Kommentar zu diesem Artikel freue ich mich.
Wenn Sie aber Fragen haben, und eine Antwort erwarten, nutzen Sie bitte das Supportforum! Die Nutzung des Forums ist auch ohne Registrierung möglich.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat