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