Animación HTML sencilla con marquee

Este artículo sirve para las personas que trabajan tan sólo con HTML al hacer páginas web y que quieren incorporar un tipo simple de animación en sus sitios. Una solución fácil para hacer una animación con HTML es hacer uso de Marquee. Hace no mucho tiempo recibimos un correo de Carlos López Schmidt en el que nos sugería un truco para animar imágenes en páginas web utilizando marquee. Como no teníamos por ningún sitio explicaciones sobre la etiqueta HTML <MARQUEE>, nos hemos dedicado a escribir este texto que da unas especificaciones y consejos más detallados sobre la etiqueta. De todos modos, hay que agradecer a Carlos la inspiración para escribir estas líneas.

<MARQUEE> es una de esas etiquetas no estándar de HTML, que soportan los navegadores más comunes, pero que no están comprendidas dentro de las especificaciones de HTML. Sirve para animar elementos dentro de la página. En concreto permite que el contenido que pongamos dentro de la etiqueta, ya sea texto, fotografías, o las dos cosas, se desplace horizontalmente por la página.

La etiqueta marquee puede servirnos para hacer animaciones en páginas sencillas, sin ningún conocimiento de lenguajes de programación ni otras complicaciones semejantes. Para los que sólo conocen HTML es una herramienta perfecta si desean hacer que un elemento de la página se mueva.

Pero atención, aunque esté comentando este truco para mover texto por la página o imágenes, tenemos que utilizar el marquee con mucha prudencia, puesto que tiene desventajas:

• Marquee no está comprendido en los estándar HTML
• Utilizar Marquee puede tener problemas de accesibilidad, es decir, se puede hacer difícil de leer para determinadas personas con discapacidades.
• El hecho de animar elementos de una página favorece el dinamismo y ayuda a llamar la atención sobre determinados mensajes o imágenes, pero si utilizas marquee en muchos lugares puede provocar confusión y marear al usuario.

Para utilizar marquee, simplemente colocamos dentro de la etiqueta los contenidos que queremos que se muevan, ya sean texto, imágenes o cualquier otro tipo de contenido. Algo como esto:

<marquee>texto que se mueve</marquee>

Pero también podríamos meter algo como esto:

<marquee>
<table align="center" width="100"border="1">
<tr>
   <td>Esta tabla se desplaza , con todo el contenido de la tabla</td>
</tr>
</table>
</marquee>

Marquee soporta una serie de atributos para modificar su comportamiento o su aspecto. Son los siguientes:

WIDTH
Anchura de la marquesina. Si no marcamos altura, se colocará en la siguiente línea, como en un párrafo distinto. Si marcamos una anchura, la marquesina intentará mostrarse en la misma línea donde la hayamos colocado. Si no hay espacio para ella se realizará el consiguiente salto de línea para mostrarla un poco más abajo.

DIRECTION
Hacia donde queremos que se displace el contenido del marquee. Los posibles valores son "LEFT" y "RIGHT".

BEHAVIOR
Es el comportamiento de la marquesina, de entre los posibles: SCROLL (el comportamiento por defecto) indica que tiene que hacer el desplazamiento siempre en una misma dirección y ALTERNATE, que indica que el desplazamiento se hace a un lado y al otro de manera alternada.

SCROLLDELAY
Es el tiempo en milisegundos que tiene que pasar entre cada cambio de la posición de lo que hay desplazándose. Es decir, cuanto mayor sea el valor, más milisegundos tardará la marquesina en moverse. El valor por defecto es 85, pero si por ejemplo ponemos un valor 500 la marquesina cambiará de estado (desplazará el contenido) cada medio segundo.

SCROLLAMOUNT
Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cada vez que se mueve. A mayor scrollamount, más se desplazará la marquesina en cada movimiento y por tanto la animación será más rápida. El valor por defecto es 6. Podemos probar a colocar un valor mayor y veremos que el movimiento será más "a golpes".

LOOP
El número de ciclos que va a moverse el texto o lo que quiera que haya dentro de la marquee. Este atributo sólo funciona en Internet Explorer. Por defecto es INFINITE, que quiere decir que se desplazará todo el tiempo sin parar. Pero si por ejemplo colocamos un valor como 3, querrá decir que la marquesina sólo realizará tres ciclos o movimientos y luego parará.

BGCOLOR
El color de fondo de la marquesina. Acepta el nombre de un color HTML o bien un valor RGB de dicho color.

HSPACE y VSPACE
Estos dos atributos sirven para definir el número de píxel que debe aparecer entre la marquesina y otros contenidos de la página, en horizontal y vertical.

Algunos ejemplos de marquee:

<marquee width=200 direction=right>
Marquesina a la derecha y con ancho
</marquee>

<marquee behaviour=alternate scrolldelay=500 bgcolor="#ff8833">texto que se mueve</marquee>

Puedes ver el ejemplo en marcha en una página aparte.