Tutorial - Text in miscare tag-ul marquee

  »   Extra  »   Tutoriale HTML - Text in miscare tag-ul marquee

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.

Exemple practice

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>

Demo

TEXT

De la stanga la dreapta. Vom adauga atributul direction cu valoarea "right" dupa cum urmeaza 

html<marquee direction="right">TEXT</marquee>

Demo

TEXT

Alternativ. Cu ajutorul atributului behavior.

html<marquee behavior="alternate">TEXT</marquee>

Demo

TEXT

De jos in sus.

html<marquee direction="up">TEXT</marquee>

Demo

TEXT

De sus in jos.

html<marquee direction="down">TEXT</marquee>

Demo

TEXT

De sus in jos alternativ.

html<marquee direction="up" behavior="alternate" style="height:100px">TEXT</marquee>

Demo

TEXT

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>

Demo

TEXT

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>

Demo

TEXT

Pe un background

html<span style="color:white">
	<marquee style=" background: red">TEXT</marquee>
</span>

Demo

TEXT

In chenar.

html<marquee style="border: red 3px solid">TEXT</marquee>

Demo

TEXT

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&nbsp;<img height="31" alt="Tutoriale in limba romana" src="http://www.etutoriale.ro/banners/88x31.gif" width="88" border="0" /></p>
</marquee>

Demo

Ceva text aici Tutoriale in limba romana

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>

Demo

Putin text innainte Tutoriale in limba romanaPutin 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.