Marquee jest znacznikiem typu blokowego w HTML. Z jego pomocą można uzyskać prostą animację tekstu w postaci przewijającego się akapitu.
Początkowo Marquee został stworzony z myślą o przeglądarce Internet Explorer. Co czyniło go jednym z niestandardowych rozwiązań.
Uwaga – Aktualnie praktycznie już się nie korzysta z tego efektu. Część przeglądarek może więc nie obsługiwać wszystkich przykładów.
Marquee jako standard HTML
Pomimo pierwotnych założeń był również obsługiwany przez inne takie jak Opera, Safari czy Mozilla Firefox. Oficjalnego został uwzględniony jako standard HTML dopiero wraz z wejściem HTML5. Co moim zdaniem jest lekko ironiczne. Ponieważ wraz z HTML5 do użytku weszło CSS3 a wraz z nim nowe typy animacji.
Może przybrać atrybuty charakterystyczne innych znaczników (np. class, style, width, height, hspace, vspace, lang, id) dzięki czemu możemy wpływać min. na kolor i rozmiar tekstu, czy szerokość pola w którym ma się wyświetlać.
Składnia – opcje jakie można włączyć
- behavior – tryb przesuwania się tekstu na ekranie (scroll, slide, alternate)
„scroll” – tekst przesuwa się od prawej strony do lewej (domyślny)
„alternate” – tekst przesuwa się od strony prawej strony do lewej, a następnie „odbija się od niej” i powraca
„slide” – tekst przesunie się od prawej strony do lewej tylko raz, na koniec zatrzymuje się i pozostanie nieruchomy - bgcolor – kolor tła znacznika
- direction – kierunek przesuwania się tekstu (left, right, up, down)„left” – w lewą stronę
„right” – w prawą stronę
„up” – przesuwanie do góry
„down” – przesuwanie na dół - loop – ilość powtórzeń
- scrollamount=” ” – skok o X pikseli
- scrolldelay=” ” – opóźnienie tekstu
- onmouseover=”this.stop()” onmouseout=”this.start()” – zatrzymanie tekstu, gdy najedzie się na niego myszką
Przykłady działania Marquee
Zacznę od przykładu z zastosowaniem zwykłej właściwości.
Od lewej do prawej
<marquee>Od lewej do prawej</marquee>Marquee – direction
Wpływ na kierunek mamy jak wspomniałam wcześniej z pomocą direction
Ten tekst będzie się przewijał do góry
<marquee direction="up">Ten tekst będzie się przewijał do góry</marquee>Tekst przewijający się góra dół – podobnie jak odwrócone napisy filmowe
<marquee direction="down">Ten tekst będzie się przewijał na dół
i w cale nie musi być jakiś krótki </marquee>Marquee – behavior
Tym razem użyjemy innej opcji, da nam ona możliwość odbicia się od krawędzi. Tekst będzie więc cały czas widoczny
<marquee behavior="alternate">Jakiś tekst</marquee>Teraz zobaczymy jak działa behavior=”slide”
<marquee behavior="slide">Jakiś tekst</marquee>Marquee + JS
A teraz dla lepszego zrozumienia powadzimy JS
<marquee direction="left" scrollamount="2" scrolldelay="1" onmouseover="this.stop()" onmouseout="this.start()">Przykład działania efektu Marquee. Najedź na niego, a zatrzyma się.</marquee>
źródło:
http://itporady.pl/html-css/efekt-marquee-czyli-przewijajacy-sie-tekst/
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.