La etiqueta marquee ¿cómo podemos usarla?

Aprenderemeos en este articulo como puedes animar texto con la etiqueta de marquee. La etiqueta marquee es un elemento HTML que hace que el texto se mueva de izquierda a derecha y de arriba a abajo.

Vamos a ilustrar estas animaciones utilizando los ejemplos mostrados a continuación.

Ejemplos prácticos usando la etiqueta marquee

Animación de derecha a izquierda. Esta animación es de las mas simples, dado que no se necesita añadir ningún atributo a la etiqueta marquee, para conseguir el movimiento.

html<marquee>TEXT</marquee>

Demo

Animación de izquierda a aderecha.Añadiremos el atributo "direction" con el valor "right", como a continuación

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

Demo

Animación alternativa. Con el atributo "behavior".

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

Demo

De abajo hacia arriba.

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

Demo

De arriba hacia abajo.

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

Demo

De arriba hacia abajo de manera alternativa.

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

Demo

De arriba hacia abajo y al mismo tiempo de derecha a izquierda. Observa el ejemplo para entenderlo mejor.

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

Demo

El mismo ejemplo pero esta vez en un espacio cerrado

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

Demo

Usando un fondo

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

Demo

Aplicando un borde a la zona de movimiento.

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

Demo

Imágenes. Usando la etiqueta marquee, de la misma manera se pueden insertar imágenes, con o sin texto. Tenemos un ejemplo muy simple a continuación:

html<marquee>UN poco de texto aqui <img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutorials " border="0"></marquee>

Demo

UN poco de texto aqui

Animación dentro de una linea de texto o un párrafo.

htmlUn poco de texto antes  <marquee WIDTH="20%"><img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutorials " border="0"></marquee> Un poco de texto después.

Demo

Un poco de texto antes Un poco de texto después.

Habria que añadir algunas cosas mas, como por ejemplo que la velocidad de movimiento de la animación que genera el atributo marquee, se puede modificar usando el atributo "scrolldelay". Un valor de "1000" por ejemplo, hará que los elementos estén casi parados, mientras que un valor igual a "1", hace que los elementos se muevan muy rápido.

El movimiento interrumpido se puede conseguir con el atributo "scrollamount". Un valor igual a "10" hará que el elemento avance a una velocidad de 10 pixels / frame.

También se puede definir el numero de animación antes de que se detenga. Para ello usaremos el atributo "loop". Un valor igual a "3", hará que la animación se ejecute 3 veces antes de que se detenga.