Laufschrift

... mit dem Marquee Tag

Das Marquee tag ermöglicht es Dir, auf Deiner Website eine ruckelfreie Laufschrift durchlaufen zu lassen.

Beispiel:



Dies wird mit CSS realisiert:

<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 15s 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>

Der Code für den Lauftext selbst lautet dann wie folgt:

<div id="marquee" class="marquee"><span>Dieser Text wird horizontal wie am Laufband gescrollt und per classes und IDs so durchs Bild laufen gelassen, dass es ruckelfrei ist</span></div>

Die Geschwindigkeit dieses Lauftextes wird in den CSS mit dem animations-Parameter festgelegt (siehe rote Zeile in den CSS). Je höher die Zahl, desto langsamer läuft die Schrift durch das Feld. Standard wäre bspw. 10. 15 macht ihn langsamer. 8 würde ihn schneller machen. Usw.

Ich habe übrigens das Aussehen des Textes durch die folgenden Angaben so verändert, dass er zum einen in Großbuchstaben, sowie in roter Schrift mit Schlagschatten dargestellt wird.

Dazu habe ich in den CSS ganz oben bei ".marquee {" folgende Angaben eingefügt:

font-family: trebuchet ms, arial, helvetica,verdana, georgia, 'times new roman', sans-serif; display:block; color:firebrick; text-align:center; padding:0rem 0rem; font-size:1.3rem; letter-spacing:1px; font-weight:bold; font-variant:small-caps; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);

Weitere Informationen zum Marquee-Tag findest Du unter: https://de.w3docs.com/html-lernen/html-marquee-tag.html