Tutorial - 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.
|
<marquee>TEXT</marquee> |
|---|
De la stanga la dreapta. Vom adauga atributul direction cu valoarea "right" dupa cum urmeaza
|
<marquee direction="right">TEXT</marquee> |
|---|
Alternativ. Cu ajutorul atributului behavior.
|
<marquee behavior="alternate">TEXT</marquee> |
|---|
De jos in sus.
|
<marquee direction="up">TEXT</marquee> |
|---|
De sus in jos.
|
<marquee direction="down">TEXT</marquee> |
|---|
De sus in jos alternativ.
|
<marquee direction="up" behavior="alternate">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.
|
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TEXT</marquee></marquee> |
|---|
Si inca odata in zig-zag dar intr-un spatiu inchis
|
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</marquee></marquee> |
|---|
Pe un background
|
<font color="WHITE"><marquee direction="left" style="background:RED">TEXT</marquee></font> |
|---|
In chenar.
|
<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.
|
<marquee>Ceva text aici <img src="/img/header_zizix.jpg" width="88" height="31" alt="Tutoriale in limba romana" border="0"></marquee> |
|---|
Animatie incadrata in text fix.
|
Putin text innainte <marquee WIDTH="20%"><img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutoriale in limba romana" border="0"></marquee> Putin text dupa. |
|---|
|
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.
Comentarii
Tagul marquee nu se foloseste prea mult din cauza abuzului din trecut..
oricum sunt alte metode de a obtine aceleasi efecte ba chiar imbunatatite..Incearca marquee cu css si jquery...se misca mult mai bine consuma mai putine resurse si efectele sunt mai curgatoare ca sa zic asa..
Foarte bine observatia...ai putea sa dai o mana de ajutor si sa aduni cateva informatii pentru un tutorial despre marquee combinat cu css si jquery...ar fi de mare ajutor.
Cu toate ca este un tutorial care depaseste putin nisa sitului, vor fi si cititori care sa iti multumeasca.
Cum pot sa fac ca in momentul in care pun mause pe un text acesta sa se schimbe(culoare, marime, font)?
Actiunea se numeste hover in general se foloseste pentru linkuri.
De exemplu:
<style type="text/css">
a:link {color:#FF0000} /* link nevizitat */
a:visited {color:#00FF00} /* link vizitat */
a:hover {color:#FF00FF} /* culoare on hover */
a:active {color:#0000FF} /* link activ */
</style>
Cu mentiunea ca "a:hover" trebuie specificat dupa "a:link", iar "a:active" dupa "ahover".
In caz contrar codul css mentionat mai sus nu va da rezultate.
Citeste tutorialul css pentru a afla unde trebuie pus si folosirea lui cu ajutorul claselor css
Succes
Multumesc mult pentru ajutor
cum pot micsora caseta, pe inaltime, in care se misca textul cand aplic:
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</marquee></marquee>.
Avem o tema la scoala in care trebuie sa facem doua imagini cu marquee sa se ciocneasca iar apoi sa porneasca sa se miste in doua parti opuse.Ma poate ajuta cineve?
Multumesc anticipat!
bravo...multumim pt tutorial
Trimite un comentariu!
