przeglądarki internetowe

Efekt Marquee czyli przewijający się tekst na stronie

Czas czytania: 2 minut

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

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/