Voi expune in acest articol cateva modalitati de animatie a textului cu ajutorul tagului marquee. Tagul marquee este un element HTML care face in mare, ca scrisul sa se miste de la stanga la dreapta si de sus in jos.
Voi exemplifica pe rand aceste animatii in exemplle ce urmeaza.
De la dreapta la stanga. Aceasta este cea mai simpla animatie dat fiind faptul ca nu vom avea nevoie de nici o eticheta pentru a o realiza.
html<marquee>TEXT</marquee>De la stanga la dreapta. Vom adauga atributul direction cu valoarea "right" dupa cum urmeaza
html<marquee direction="right">TEXT</marquee>Alternativ. Cu ajutorul atributului behavior.
html<marquee behavior="alternate">TEXT</marquee>De jos in sus.
html<marquee direction="up">TEXT</marquee>De sus in jos.
html<marquee direction="down">TEXT</marquee>De sus in jos alternativ.
html<marquee direction="up" behavior="alternate" style="height:100px">TEXT</marquee>De sus in jos alternativ si de la stanga la dreapta in acelasi timp. Se va obtine o miscare in ziz-zag a textului.
html<marquee direction="up" behavior="alternate" width="80%">
<marquee direction="right">TEXT</marquee>
</marquee>Si inca odata in zig-zagdar intr-un spatiu inchis
html<marquee direction="up" behavior="alternate" width="80%">
<marquee direction="right" behavior="alternate">TEXT</marquee>
</marquee>Pe un background
html<span style="color:white">
<marquee style=" background: red">TEXT</marquee>
</span>In chenar.
html<marquee style="border: red 3px solid">TEXT</marquee>Fotografie. Folosind scripturile de mai sus se pot introduce si fotografii cu sau fara text. Acestea vor fi introduse conform exemplului urmator.
html<marquee>
<p>Ceva text aici <img height="31" alt="Tutoriale in limba romana" src="http://www.etutoriale.ro/banners/88x31.gif" width="88" border="0" /></p>
</marquee>Animatie incadrata in text fix.
html<p>Putin text innainte <marquee width="20%"><img height="31" alt="Tutoriale in limba romana" src="http://www.etutoriale.ro/banners/88x31.gif" width="88" border="0" /></marquee>Putin text dupa. </p>Putin text innainte Putin text dupa.
Ar mai fi cateva de spus si anume ca viteva miscari poate fi modificata cu ajutorul atributului scrolldelay unde o valoare de "1000" de exemplu ar reduce viteza aproape de 0, iar o valoare de "1" ar fi o viteza foarte mare.
Miscare intrerupta cu ajutorul atributului scrollamount.O valoare de "10" de exemplu va innainta textu in miscarea lui cu 10 px/frame.
De asemenea se poate fixa un numarul de parcurgeri ale textului, de la dreapta la stanga de exemplu, cu ajutorul atributului loop. O valoare de "3" a acestuia te va lasa sa vezi textul de trei ori dupa care va disparea.