Animación HTML sencilla con marquee

  • Por
  • 14 de febrero de 2008
  • Valoración:
  • 31 Comentarios
  • Taller HTML
Utilizamos la etiqueta marquee para realizar una animación sencilla en una página web. Como animar una imagen o hacer texto en moviendo sólo con HTML.
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

Guillermo

19/2/2008
Muy interesante aporte!
http://www.direct2costarica.net

carlos lopez schmidt

23/2/2008
Este "truco" lo envié hace algún tiempo a esta página; comentando que con él se podían añadir imágenes. No me asumo el "descubridor", pero el hecho de que recién lo publiquen me hace pensar que está basado en mi "colaboración" y, creo, deberían publicar también el nombre de quien lo envió como colaboración para la página.

yacko

09/3/2008
puxa ala firme ta brabasa esta pagina haa la boy ha visitar todos los dias q pueda pero ojala no me olbide del nombre jejejeje ...

La/0

02/10/2008
sta bien la informacion era lo q andaba buscando para la tarea

kmny1

28/2/2009
Esta suave los marquees pero faltan mas
si quisiera que mi marquee sea de humo o desapareca pero felicidades por esta chida pagina.

Dantra

21/3/2009
quisiera saber como hacer para colocar un vinculo de mi pagina web a otra y como poner un fondo de color por que el codigo font color no lo tengo comlrto

Antonio

28/4/2009
Ayuda
Me gustaria que me ayudarais porque quiere que el texto se repita constantemente quedando algo asi:
HOLA ESTO SE REPITE HOLA ESTO SE REPITE HOLA ESTO SE REPITE
de tal forma que se mueva la cadena sin dejar apenas hueco en blanco.
Gracias

Pablo Maldonado

13/5/2009
calidad
Que calidad esta este articulo la verdad me va ha servir de mucho para hacer mis paginas orale gracias

Carlos López Schmidt

02/6/2009
Uso de Marquee
Miguel Angel, gracias por tu amable mención a mi pequeño aporte.
Si no es considerado como Spam, pueden ver un ejem. de cómo usé marquee para incluir 9 imágenes de 200 px de ancho, usando un espacio de 200 px de ancho:
http://www.cimarrones-peru.org/codice_trujillo.htm
Saludos

gonzalo_martinez-434764

01/7/2009
bien
esto es lo que andaba buscando.. exelente aporta

fany

03/9/2009
felicidades
tu tema esta muy claro, ojala realices mas ejemplos.
suerte.

eva

05/1/2010
blanco en la marquesina (marquee)
Hola,
me gustaria saber si alguien sabe cómo evitar el "espacio en blanco" que queda en el texto en movimiento que se hace con la <marquee>, aun poniendo el parametro loop infinito, siempre entre una y otra vez que muestra el texto aparece un espacio.

Gracias.

Sgroya

06/2/2010
Gracias!!!!
Muxiiiisimas gracias Miguel Ángel !!!! Después de visitar cientos de sitios para hacer la animación marquee .. sólo he conseguido que funcione con tus explicaciones !!
Seguiré visitándote a ver que más ideas maravillosas nos ofreces!!!
un besoooo
aqui te dejo mi URL por si quieres ver cómo quedó:

http://sgroyaparadise.blogspot.com/

rtyi

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

zeus

30/9/2010
the life is beautiful
que bacaneria de sitio web.!! los felicitos que buen trabajo. apenas me adentro a la creacion de web. pero todos estos articulos me tiene ilucionado.


"GRACIAS".!!!

cagon_to_r_a

08/10/2010
error en marquee
Tengo un marquee que no funciona como es debido y, en lugar de ir desapareciendo progresivamente, en cuanto llega al borde desaparece de golpe. ¿Alguna solución?

rudy

09/11/2010
html codigos
gracias por sacarme de un apuro.

carlos zeceña

28/1/2011
GRATITUD
GRACIAS POR EL SERVICIO

Luis Alfonso

01/5/2011
El ticker de Ultimas Noticias
Como se hace el ticker de ultimas noticias que tienen en la pagina?

Alba

13/9/2011
ayuda!
qisieraa saber si un parrafo puede moverse de abajo hacia arribaaa????

esperoo larespuesta prontooo!! es para un proyecto de titulaciion!! gracciass!! :D

MIGUEL PÉREZ

07/12/2011
MUY BUENO EL COMENTARIO
WWW.CGEVENTOS.CL

MUY BUENA OPCION

danae

15/12/2011
marquesina
muchas gracias , no sabia como hacer la tarea, pero con tu ayuda la lograre

maria

29/1/2012
como ago?
hola q tal yo utilize <font color="#FFFFFF"><marquee direction="left" style="background:BLUE">hola</marquee></font> en www.mundonick.com/comunidad y todo estaba bien hasta q no se veian los comentarios de los demas solo los nombres de usuario y despues en mi perfil solo se veia mi foto pero no puedo comentar ni acer nada que hago? existe una solucion?

beatris

11/3/2012
gracias
gracias por el post es lo que estaba buscando para agregar un poco mas de estilo a esta web http://www.erotismotelefonico.com/ muchas gracias

rqweqwe

06/7/2012
nada
<marquee>HOLa</marquee>

adasdsda

06/7/2012
asdas
<b>hola<b>

CARLOS ALFREDO

14/2/2013
AYUDA
me llamarán ignorante pero no me sale con movimiento, como podré hacer?

Rush

17/9/2013
Buen aporte
alguien me podria decir si se puede realizar la animacion pero en forma de credito agradesco cualquier aporte saludos.....

eeeee

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

paula

22/3/2014
como agrandar el texto deslizante?
hola quisiera saber como poner el texto mas grande en la frase deslizante.
Muy util su articulo.
Muchas gracias

julio césar

15/4/2014
Como usar más
Excelente trabajo, como puedo hacer para usar fuentes más grandes y fondos igualmente mas grandes
Gracias

Compartir