Animacja Marquee

Uwaga: animacja Marquee jest interpretowana jedynie przez Microsoft Internet Explorer i nie wchodzi w zakres standardu HTML 4.0. Odradzamy jej stosowanie na stronach WWW, choć może ona bardzo dobrze spełniać swoją rolę w archiwach elektronicznych HTML Help (pliki .chm), które są oparte właśnie na Internet Explorerze, czy też w firmowych intranetach, w których standardową przeglądarką jest produkt Microsoftu.

Efektownym elementem graficznym, akceptowanym przez Internet Explorer, a wprowadzonym przez Microsoft w ramach tzw. Microsoft Extensions, jest animacja Marquee. Jest to "pływający" w poprzek ekranu napis.

Animacji można przypisać wiele parametrów, które bardzo urozmaicają zachowanie napisu.

[zielona kropka] Minimalna definicja Marquee ma postać <MARQUEE>Tekst animacji</MARQUEE>. Na przykład:

Tekst sobie pływa

Dodatkowe parametry są wstawiane w ramach otwierającego znacznika, tj. <MARQUEE parametr>

[zielona kropka] Animację można wstawiać także do komórki tabeli, między znaczniki <TD> </TD>:

Oferta naszej firmy

[zielona kropka] Tekst może się poruszać na trzy sposoby:

BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu.

behavior=scroll

BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się.

behavior=slide

BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego.

behavior=alternate

[zielona kropka] BGCOLOR=kolor pozwala określić kolor tła, czyli drogi, po której porusza się napis. Kolor można podać w postaci numerycznej lub słownej (16 barw). Opis słowny obejmuje: Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua.

Kolor Red

Kolor Yellow

Kolor Fuchsia

[zielona kropka] Początkowy kierunek ruchu jest określany za pomocą parametru DIRECTION=LEFT lub DIRECTION=RIGHT. Domyślny jest kierunek w lewo.

Ruch w lewo

Ruch w prawo

[zielona kropka] Fizyczne wymiary drogi są wyznaczone przez parametry HEIGHT=x (wysokość) i WIDTH=y (szerokość). Można je wyrazić w pikselach lub procencie wysokości i szerokości ekranu.

Wysokość 50 pikseli

Szerokość 50 procent

[zielona kropka] Parametr LOOP=x pozwoli powtórzyć ruch tekstu x razy.

Ten napis przesunie się 20 razy i zatrzyma się

[zielona kropka] Parametry HSPACE=x i VSPACE=y pozwalają określić odległość pola animacji w poziomie i/lub w pionie od sąsiadujących elementów, np. tekstu.

Tekst przed animacjąTa animacja jest oddalona o 100 pikseli od sąsiadującego tekstuTekst za animacją

Tekst nad animacją
Ta animacja jest oddalona o 30 pikseli od sąsiadujących akapitów
Tekst pod animacją

Uwaga: akapity nad i pod animacją należy oddzielić od animacji znakiem końca akapitu <P> lub końca wiersza <BR>.

[zielona kropka] Skoro możemy definiować kolor tła animacji, konieczna jest także niekiedy zmiana koloru tekstu animacji, aby uzyskać należny kontrast. Możemy również wprowadzić atrybuty tekstu - pogrubienie, pochylenie lub podkreślenie. Odpowiednie parametry należy wstawiać na zewnątrz definicji MARQUEE.

Jak wiemy, definicja koloru fragmentu tekstu ma postać <FONT COLOR=kolor> Tekst </FONT>.

Kilka przykładów:

Biały tekst na czerwonym tle

Zauważmy, że w polu animacji można wstawić więcej spacji, w przeciwieństwie do zwykłego tekstu.

Czerwony tekst na żółtym tle

Biały, pogrubiony tekst na zielonym tle

Biały, pochylony tekst na zielonym tle

Biały, podkreślony tekst na czarnym tle

[zielona kropka] Pola animacji można bezpośrednio ze sobą łączyć. W poniższym przykładzie każde pole zajmuje 50% szerokości ekranu, a definicje zostały podane jedna po drugiej.

Biały tekst na zielonym tle Biały tekst na czerwonym tle Biały tekst na czerwonym tle Biały tekst na zielonym tle

[zielona kropka] Parametr SCROLLAMOUNT=x pozwala określić w pikselach skoki tekstu (ruch odbywa się skokami po x pikseli). Przy niewielkiej wartości ruch jest płynny i wolniejszy, przy dużych - nieco szarpany i szybszy.

Scrollamount=5

Scrollamount=30

Scrollamount=50

[zielona kropka] Parametr SCROLLDELAY=y pozwala określić w milisekundach odstępy czasowe między kolejnymi skokami. 1000 = 1 sekunda.

Scrolldelay=500 - skok co 0,5 sekundy

Scrolldelay=2000 - skok co 2 sekundy o 50 pikseli

[zielona kropka] Parametr ALIGN=abc (top, middle, bottom) pozwala ustalić, gdzie (na jakiej wysokości pola) znajduje się tekst sąsiadujący z animacją:

Tekst u góry pola Animacja

Tekst w połowie pola Animacja

Tekst u dołu pola Animacja