L'etichetta marquee e il suo utilizzo

  »   Extra  »   The marquee tag, How do we use it.

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.

Esempio pratico dell'utilizzo di marquee

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>

Demo

TESTO

Da sinistra a destra.E' necessario solamente aggiungere l'attrbuto 'direction' come qui sotto:

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

Demo

TESTO

Alternato. Si utilizza l'attributo  'behavior'.

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

Demo

TESTO

Dal basso verso l'alto:.

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

Demo

TESTO

Dall'alto verso il basso:

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

Demo

TESTO

Dall'alto verso il basso e viceversa in maniera alternata:

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

Demo

TESTO

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>

Demo

TESTO

Stesso esempio ma in uno spazio ristretto:

html<marquee behavior="alternate" direction="up" width="80%">
	<marquee direction="right" behavior="alternate">TESTO</marquee>
</marquee>

Demo

TESTO

Sullo sfondo:

html<font color="WHITE"><marquee direction="left" style="background:RED">TESTO</marquee></font>

Demo

TESTO

In una cornice:

html<marquee style="border:RED 3px SOLID">TESTO</marquee>

Demo

TESTO

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>

Demo

Testo e immagine Tutorials

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.

Demo

Testo prima Tutorials 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.