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ń.

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

Zacznę od przykładu z zastosowaniem zwykłej właściwości.
Od lewej do prawej

Od lewej do prawej</marquee>

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>

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

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>

Jakiś tekst – alternate

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

Jakiś tekst – slide

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

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/