Das -Tag ist tot, aber die klassische Laufschrift lebt im modernen Webdesign weiter. Heute nutzen wir dafür kein veraltetes HTML mehr, sondern sauberes CSS und modernes JavaScript. Das sorgt für flüssige Animationen, schont die Performance und sichert die Barrierefreiheit Deiner Website.
Hier sind die drei besten Methoden, um eine moderne Laufschrift (Ticker) zu erstellen. Methode 1: Reines CSS (Die beste Wahl für Text-Ticker)
Diese Methode ist extrem performant, da sie vollständig auf JavaScript verzichtet. Sie nutzt CSS-Keyframes, um den Text nahtlos von rechts nach links zu bewegen. HTML:
Use code with caution. CSS: Use code with caution. Methode 2: Unendlicher Logo-Loop mit Flexbox
Wenn Du eine unendliche Schleife aus Logos oder Bildern erstellen willst, bei der keine Lücke entsteht, verdoppelst Du den Inhalt im HTML und verschiebst ihn um exakt 50 Prozent. HTML:
Use code with caution. CSS: Use code with caution. Methode 3: JavaScript-Bibliotheken (Für komplexe Feeds)
Wenn Deine Laufschrift dynamische Daten aus einer API laden, interaktive Elemente enthalten oder extrem flexibel steuerbar sein muss, greifst Du am besten zu etablierten JavaScript-Bibliotheken. Sie fangen Berechnungsfehler bei unterschiedlichen Bildschirmgrößen automatisch ab.
Splide.js (mit Auto-Scroll-Erweiterung): Extrem leichtgängig, modular und perfekt für Slider, die sich wie ein Ticker verhalten sollen.
GreenSock (GSAP): Die absolute Profi-Lösung für High-End-Animationen. Mit dem GSAP Modulo-Trick lassen sich extrem flüssige, unendliche Ticker programmieren, die auch auf Smartphones perfekt laufen. Barrierefreiheit nicht vergessen!
Das alte -Tag war ein Albtraum für die Barrierefreiheit, da Screenreader den Text oft nicht richtig erfassen konnten und Nutzer die Bewegung nicht stoppen konnten. Achte bei Deinen modernen Laufschriften auf zwei Dinge:
Pausieren erlauben: Nutze den CSS-Befehl animation-play-state: paused; bei :hover und :focus, damit Nutzer den Text in Ruhe lesen können.
Rücksicht auf System-Einstellungen: Manche Menschen reagieren empfindlich auf Animationen. Nutze Media Queries, um die Bewegung für diese Nutzer abzuschalten:
@media (prefers-reduced-motion: reduce) { .ticker-content, .logo-track { animation: none; white-space: normal; } } Use code with caution.
Mit diesen modernen Alternativen bleibt Deine Website schnell, zugänglich und optisch auf dem neuesten Stand.
Leave a Reply