MARQUEE im Zeitalter von HTML5 und CSS3

Diejenigen von Ihnen, die schon lange HTML schreiben, erinnern sich vielleicht an das Element. Dies war ein browserspezifisches Element, das ein Banner mit Lauftext über den Bildschirm erstellte. Dieses Element wurde nie zum. hinzugefügt HTML Spezifikation und Unterstützung dafür waren von Browser zu Browser sehr unterschiedlich. Die Leute hatten oft sehr starke Meinungen über die Verwendung dieses Elements – sowohl positiv als auch negativ. Aber ob Sie es liebten oder hassten, es diente dem Zweck, Inhalte sichtbar zu machen, die über die Boxgrenzen hinausgingen.

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

watch instagram stories

Neue CSS3-Eigenschaften

CSS3 fügt fünf hinzu neue Eigenschaften um zu steuern, wie Ihre Inhalte im Laufschrift angezeigt werden: Überlauf-Stil, Laufschrift-Stil, Laufschrift-Wiedergabe-Zählung, Laufschrift-Richtung und Laufschrift-Geschwindigkeit.

Überlauf-Stil
Die Eigenschaft overflow-style (die wir auch im Artikel CSS Overflow besprochen haben) definiert den bevorzugten Stil für Inhalte, die die Inhaltsbox überlaufen. Wenn Sie den Wert auf marquee-line oder marquee-block setzen, wird Ihr Inhalt nach links/rechts (marquee-line) oder nach oben/unten (marquee-block) ein- und ausgeschoben.

Festzelt-Stil
Diese Eigenschaft definiert, wie der Inhalt in die Ansicht (und aus) verschoben wird. Die Optionen sind scrollen, schieben und abwechseln. Das Scrollen beginnt mit dem Inhalt vollständig außerhalb des Bildschirms und bewegt sich dann über den sichtbaren Bereich, bis er wieder vollständig außerhalb des Bildschirms ist. Slide beginnt mit dem Inhalt vollständig außerhalb des Bildschirms und bewegt sich dann weiter, bis der Inhalt vollständig auf den Bildschirm verschoben wurde und kein Inhalt mehr zum Schieben auf dem Bildschirm vorhanden ist. Schließlich springt der Inhalt abwechselnd von einer Seite zur anderen und gleitet hin und her.

Festzelt-Spiel-Anzahl
Einer der Nachteile bei der Verwendung des MARQUEE-Elements besteht darin, dass der Laufrahmen nie aufhört. Aber mit der Stileigenschaft marquee-play-count können Sie den Marquee so einstellen, dass er den Inhalt für eine bestimmte Anzahl von Malen ein- und ausschaltet.

Festzelt-Richtung
Sie können auch die Richtung auswählen, in die der Inhalt auf dem Bildschirm scrollen soll. Die Werte vorwärts und rückwärts basieren auf der Richtung des Textes, wenn der Überlaufstil marquee-line ist und nach oben oder unten, wenn der Überlaufstil marquee-block ist.

Festzelt-Richtungsdetails

Überlauf-Stil Sprachrichtung nach vorne umkehren
Festzelt-Linie ltr links Recht
rtl Recht links
Festzelt-Block oben Nieder

Festzelt-Geschwindigkeit
Diese Eigenschaft bestimmt, wie schnell der Inhalt auf dem Bildschirm gescrollt wird. Die Werte sind langsam, normal und schnell. Die tatsächliche Geschwindigkeit hängt vom Inhalt und dem Browser ab, der ihn anzeigt, aber die Werte müssen langsam sein, ist langsamer als normal, was langsamer als schnell ist.

Browserunterstützung der Marquee-Eigenschaften

Möglicherweise müssen Sie verwenden Lieferantenpräfixe um die CSS-Marquee-Elemente zum Laufen zu bringen. Sie sind wie folgt:

CSS3 Anbieterpräfix
Überlauf-x: Laufschrift-Linie; overflow-x: -webkit-marquee;
Festzelt-Stil -webkit-marquee-style
Festzelt-Spiel-Anzahl -webkit-festzelt-wiederholung
Laufschriftrichtung: vorwärts|rückwärts; -webkit-marquee-Richtung: vorwärts|rückwärts;
Festzelt-Geschwindigkeit -webkit-marquee-speed
kein Äquivalent -webkit-marquee-inkrement

Mit der letzten Eigenschaft können Sie festlegen, wie groß oder klein die Schritte sein sollen, wenn der Inhalt im Laufschriftfenster auf dem Bildschirm gescrollt wird.

Damit Ihr Marquee funktioniert, sollten Sie zuerst die Werte des Herstellers voranstellen und dann die CSS3-Spezifikationswerte folgen. Hier ist zum Beispiel das CSS für einen Laufschriftrahmen, der den Text fünfmal von links nach rechts in einem 200x50-Feld scrollt.

{
Breite: 200px; Höhe: 50px; Leerzeichen: jetztrap;
Überlauf versteckt;
overflow-x:-webkit-marquee;
-webkit-marquee-Richtung: vorwärts;
-webkit-marquee-style: scrollen;
-webkit-marquee-speed: normal;
-webkit-marquee-inkrement: klein;
-Webkit-Festzelt-Wiederholung: 5;
Überlauf-x: Laufschrift-Linie;
Marquee-Richtung: vorwärts;
Festzelt-Stil: Schriftrolle;
Festzelt-Geschwindigkeit: normal;
Festzelt-Spielanzahl: 5;
}
instagram story viewer