Werner-Zenk.de - Zur Startseite

Lauftext/Laufschrift - Marquee

Sie können erreichen, dass ein Text mitten im übrigen Text automatisch horizontal oder vertikal scrollt. Diese Angaben gehören nicht zum HTML-Standard und wurden ursprünglich nur vom Internet Explorer interpretiert. Mittlerweile setzen auch alle anderen Browser das marquee-Element um.

Marquee von rechts nach links

<marquee direction="left"> Marquee von rechts nach links </marquee>

 

Marquee von links nach rechts

<marquee direction="right"> Marquee von links nach rechts </marquee>

 

Marquee wechselnd

<marquee behavior="alternate"> Marquee wechselnd </marquee>

 

Marquee Geschwindigkeit

<marquee scrollamount="10" scrolldelay="10"> Marquee Geschwindigkeit </marquee>

 

Marquee mit Bild

<marquee> Marquee mit Bild <img src="bild.gif"> </marquee>

 

Marquee mit Hyperlink

<marquee>
Marquee mit <a href="http://www.example.com"> Hyperlink </a>
</marquee>

 

Marquee mit Farbe

<marquee style="background: red; color: yellow" behavior="alternate">
Marquee mit Farbe </marquee>

 

Marquee wird nur 5 mal durchlaufen!

<marquee loop="5">
Marquee wird nur 5 mal durchlaufen! </marquee>

 

Marquee von unten nach oben.
Dieser Text dient nur zur Demonstration.

<marquee direction="up" scrollamount="2" style="height: 80px;">
Marquee von unten nach oben.</marquee>

 

Marquee von oben nach unten.
Dieser Text dient nur zur Demonstration.

<marquee direction="down" scrollamount="3" style="height: 80px;">
Marquee von oben nach unten</marquee>

 

Einen Zug mit Marquee fahren lassen

Bei einem Klick auf die Lok fährt der Zug rückwärts bzw. bei einem doppelten Klick wieder vorwärts.
Beim verschieben der Lok (oder Wagen), wird die Lok (oder der Wagen) getauscht.

Über den Regler lässt sich die Geschwindigkeit des Zuges einstellen. Wenn die Ampel auf Rot ist, sollte der Zug stehen bleiben.

Der Zug fährt durch verschiedene Landschaften, Städte, unter Brücken und Tunnel hindurch. Dabei ändert sich jede Stunde die Farbe des Himmels. Ab 1 Uhr Nachts (bzw. 13 Uhr) fährt der Zug in die entgegengesetzte Richtung.

 


 

Marquee mit CSS3

Marquee ist in HTML 5 veraltet, verwenden Sie CSS3 Animation, für die gleichen Ergebnisse!

<style>
@keyframes marquee {
 0%   { text-indent: 550px }
 100% { text-indent: -550px }
}

.marquee {
 width: 550px;
 margin: auto;
 padding: 2px;
 overflow: hidden;
 white-space: nowrap;
 border: solid 1px #CCCCCC;
 animation: marquee 10s linear infinite;
}

.marquee:hover {
 animation-play-state: paused;
}
</style>

<p class="marquee">Marquee mit CSS3</p>

Marquee mit CSS3