Efekt Marquee czyli przewijający się tekst na stronie

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

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

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

Ten tekst będzie się przewijał na dół
i w cale nie musi być jakiś krótki

<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

Jakiś tekst

<marquee behavior="alternate">Jakiś tekst</marquee>

---

Teraz zobaczymy jak działa behavior=”slide”

Jakiś przykładowy tekst

<marquee behavior="slide">Jakiś tekst</marquee>

---

Marquee + JS

A teraz dla lepszego zrozumienia powadzimy JS

Przykład działania efektu Marquee. Najedź na niego, a zatrzyma się.

<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/