Lauftext / Laufschrift - Marquee

Sie können erreichen, dass ein Text (oder ein Bild) 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>


Dieses Marquee springt

<marquee direction="down" width="250" height="200" behavior="alternate">
<marquee behavior="alternate">
Dieses Marquee springt
</marquee>
</marquee>

Einen Zug mit Marquee und JavaScript fahren lassen

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 fährt der Zug autom. in die entgegengesetzte Richtung. Im Personenzug werden von 19 - 08 Uhr die Lichter eingeschaltet. Die Gütertransporte haben ab 08 Uhr teilw. leere Rückfahrten.

➧ Ein kleines Spiel
Bringen Sie den Zug so schnell und sicher wie möglich vom einen Ort zum anderen, das gibt Bonuspunkte, diese werden von den Strafpunkten abgezogen.
Strafpunkte erhalten Sie z.B.: beim überfahren einer roten Ampel oder überschreiten der Höchstgeschwindigkeit, diese liegen zur Zeit bei 0 Punkten. Durch vorbildliches fahren mit dem Zug werden die Punkte wieder weniger.

➧ Navigation
Über dem Regler lässt sich die Geschwindigkeit des Zuges einstellen. Wenn die Ampel auf Rot ist, sollte der Zug stehen bleiben. Mit der "Highspeed Elektrolok" kann bis zu 28km/h gefahren werden ansonsten liegt das Limit bei 22km/h.

Bei einem doppelten Klick auf die Lok fährt der Zug in die entgegengesetzte Richtung. Beim verschieben der Lok (oder der Wagen), wird die Lok (oder der Wagen) getauscht. Dies ist aber nur dann möglich wenn der Schaffner kein Signal vom Zugführer! Signal gibt.

➧ Sound abspielen (Lautstärke am PC anpassen!)
Bei einem doppelten Klick auf die Wagen hört man das rattern der Wagen. Bei Auswahl der Dampflok ertönt ab und zu die Dampfpfeife.

 


 

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


Javascript, CSS & HTML gehe zu werner-zenk.de
<style>
#animate-container {
 background-color: #ECF0F1;
 color: #D35400;
 font-size: 20px;
 font-weight: 700;
 white-space: nowrap;
 text-transform: uppercase;
 overflow: hidden;
 padding: 20px 0;

 animation-name: text-indent-animate;
 animation-duration: 5s;
 animation-timing-function: linear;
 animation-direction: forwards;
 animation-iteration-count: infinite;
}

#animate-container:hover {
 animation-play-state: paused;
}

@keyframes text-indent-animate {
 0% {
   text-indent: -40%;
 }

 100% {
  text-indent: 100%;
 }
}
</style>

<div id="animate-container">Javascript, CSS & HTML</div>