MARQUEE im Zeitalter von HTML5 und CSS3

Diejenigen, die schon lange HTML geschrieben haben, können sich an das Element erinnern. Dies war ein browserspezifisches Element, das ein Banner mit scrollendem Text auf dem Bildschirm erstellte. Dieses Element wurde nie zur HTML-Spezifikation hinzugefügt und die Unterstützung dafür war bei den Browsern sehr unterschiedlich. Die Menschen hatten oft sehr starke Meinungen über die Verwendung dieses Elements - sowohl positiv als auch negativ. Aber egal, ob Sie es geliebt oder gehasst haben, es diente dazu, Inhalte sichtbar zu machen, die die Rahmengrenzen überschreiten.

Der Grund dafür war, dass Browser nie vollständig implementiert wurde, abgesehen von einer starken persönlichen Meinung, dass er als visueller Effekt betrachtet wird und daher nicht durch das HTML definiert werden sollte, das die Struktur definiert. Stattdessen sollten visuelle oder Präsentationseffekte von CSS verwaltet werden. Und CSS3 fügt das Marquee-Modul hinzu, um zu steuern, wie Browser den Marquee-Effekt zu Elementen hinzufügen.

Neue CSS3-Eigenschaften

CSS3 fügt fünf neue Eigenschaften hinzu, mit denen Sie steuern können, wie Ihr Inhalt im Auswahlrahmen angezeigt wird: Überlaufart, Festzelt-Stil, Laufzählstand, Marquee-Richtung und Marquee-Geschwindigkeit.

ÜberlaufartDas Überlaufart Diese Eigenschaft (die ich auch im Artikel CSS-Überlauf behandelt habe) definiert den bevorzugten Stil für Inhalte, die das Inhaltsfeld überlaufen. Wenn Sie den Wert auf setzen Laufschriftlinie oder Festzeltblock Ihr Inhalt wird nach links / rechts verschoben (Laufschriftlinie) oder auf / ab (Festzeltblock).

Festzelt-StilDiese Eigenschaft definiert, wie der Inhalt in die Ansicht (und nach außen) verschoben wird.

Die Optionen sind scrollen, rutschen und wechseln. Der Bildlauf beginnt mit dem gesamten Inhalt außerhalb des Bildschirms und bewegt sich dann über den sichtbaren Bereich, bis der Bildschirm wieder vollständig außer Sicht ist. Folie beginnt damit, dass der Inhalt vollständig vom Bildschirm entfernt wird, und bewegt sich dann so lange, bis der Inhalt vollständig auf dem Bildschirm angezeigt wird und kein Inhalt mehr auf dem Bildschirm angezeigt werden kann.

Abschließend wird der Inhalt von alternate von Seite zu Seite durchlaufen und vor und zurück verschoben.

LaufzählstandEiner der Nachteile bei der Verwendung von FESTZELT Element ist, dass die Laufschrift nie aufhört. Aber mit der Stileigenschaft Laufzählstand Sie können den Laufrahmen so einstellen, dass der Inhalt für eine bestimmte Anzahl von Malen ein- und ausgeschaltet wird.

Marquee-RichtungSie können auch die Richtung auswählen, in der der Inhalt auf dem Bildschirm angezeigt werden soll. Die Werte nach vorne und umkehren basieren auf der Ausrichtung des Textes, wenn die Überlaufart ist Laufschriftlinie und auf oder ab, wenn die Überlaufart ist Festzeltblock.

Marquee-Direction-Details

Überlaufart	Sprachrichtung	nach vorne	umkehren
Laufschriftlinie	ltr	links	Recht
	rtl	Recht	links
Festzeltblock		oben	Nieder

Marquee-GeschwindigkeitDiese Eigenschaft bestimmt, wie schnell der Inhalt auf dem Bildschirm angezeigt wird. Die Werte sind schleppend, normal, und schnell. Die tatsächliche Geschwindigkeit hängt vom Inhalt und vom angezeigten Browser ab, die Werte müssen jedoch angegeben werden schleppend ist langsamer als normal das ist langsamer als schnell.

Browserunterstützung der Marquee-Eigenschaften

Möglicherweise müssen Sie Herstellerpräfixe verwenden, damit die CSS-Auswahlelemente funktionieren. Sie sind wie folgt:

CSS3	Herstellerpräfix
Überlauf-x: Laufschriftlinie;	Überlauf-x: -webkit-Marquee;
Festzelt-Stil	-webkit-marquee-style
Laufzählstand	-webkit-Laufschrift-Wiederholung
Marquee-Richtung: vorwärts | rückwärts;	-webkit-Marquee-Richtung: vorwärts | rückwärts;
Marquee-Geschwindigkeit	-Webkit-Marquee-Geschwindigkeit
kein Äquivalent	-webkit-Marquee-Inkrement

Mit der letzten Eigenschaft können Sie festlegen, wie groß oder klein die Schritte sein sollen, während der Inhalt auf dem Bildschirm in der Laufschrift angezeigt wird.

Damit Ihr Marquee funktioniert, sollten Sie zuerst die Werte des Herstellers vor dem Anbieter platzieren und dann die Werte der CSS3-Spezifikation eingeben. Hier ist zum Beispiel das CSS für ein Laufschriftfeld, das den Text innerhalb einer 200x50-Box fünfmal von links nach rechts scrollt.

{ Breite: 200px; Höhe: 50px; Leerraum: Nowrap; Überlauf versteckt; Überlauf-x: -webkit-Marquee; -webkit-Marquee-Richtung: vorwärts; -webkit-marquee-style: scrollen; -webkit-Marquee-Geschwindigkeit: normal; -webkit-Marquee-Inkrement: klein; -Webkit-Festzelt-Wiederholung: 5; Überlauf-x: Laufschriftlinie; Marquee-Richtung: vorwärts; Laufschriftstil: Blättern; Laufschriftgeschwindigkeit: normal; Laufzählstand: 5;}