In questo articolo vi mostrerò alcuni modi per animare il testo con l'etichetta tag marquee. Il tag marquee è un elemento HTML che fa muovere il testo da sinistra a destra e dall'alto verso il basso.
Per farlo utilizzerò l'esempio qui sotto.
Da destra a sinistra. Questa è l'animazione più semplice data e non avremo bisogno di un'etichetta per realizzare il movimento.
html<marquee>TESTO</marquee>Da sinistra a destra.E' necessario solamente aggiungere l'attrbuto 'direction' come qui sotto:
html<marquee direction="right">TESTO</marquee>Alternato. Si utilizza l'attributo 'behavior'.
html<marquee behavior="alternate">TESTO</marquee>Dal basso verso l'alto:.
html<marquee direction="up">TESTO</marquee>Dall'alto verso il basso:
html<marquee direction="down">TESTO</marquee>Dall'alto verso il basso e viceversa in maniera alternata:
html<marquee direction="up" behavior="alternate" style="height:100px">TESTO</marquee>Dall'alto verso il basso e da sinistra a destra allo stesso tempo. Osserva l'esempio per capire meglio.
html<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TESTO</marquee></marquee>Stesso esempio ma in uno spazio ristretto:
html<marquee behavior="alternate" direction="up" width="80%">
<marquee direction="right" behavior="alternate">TESTO</marquee>
</marquee>Sullo sfondo:
html<font color="WHITE"><marquee direction="left" style="background:RED">TESTO</marquee></font>In una cornice:
html<marquee style="border:RED 3px SOLID">TESTO</marquee>Immagine. Utilizzando lo script di cui sopra, possono essere inserite foto con o senza testo. Saranno introdotte come nell'esempio seguente:
html<marquee>Testo e immagine <img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutorials " border="0"></marquee>Animazioni nel testo.
htmlTesto prima <marquee WIDTH="20%"><img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutorials " border="0"></marquee> testo dopo.NOTA: che la velocità del movimento può essere cambiata usando "scrolldelay" dove un valore dell'attributo "1000", ad esempio, ridurrebbe la velocità vicino a 0, mentre un valore di "1" sarebbe una velocità molto alta.
Movimento interrotto con attributo scrollamount. Un valore di "10" ad esempio, farà avanzare il testo solamente di 10 pixel.
Si può anche impostare un numero di volte che il testo passerà da destra a sinistra per esempio, usando il ciclo di attributi. Un valore di "3" vi permetterà di vedere le parole tre volte prima che spariscano.