Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Promoción de webs | Rentabilidad de webs
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

Animación HTML sencilla con marquee


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.


<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.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada
+ 3 comentarios no revisados

 Autoría, licencia y acciones sobre este artículo

Informe de Miguel Angel Alvarez*
Director de DesarrolloWeb.com

Atención: Contenido exclusivo de DesarrolloWeb.com. No reproducir. Copyright.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Taller de HTML

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Taller HTML


 Comentarios sin revisar
Entre los comentarios no revisados puede haber algunos interesantes que se hayan enviado recientemente.
 Se han encontrado 3 comentarios sin revisar

Ver el comentario no revisadoVer los comentarios no revisados
Añadir un comentario al artículo Añadir un comentario del artículo



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Taller de HTML
Categorías
+Taller HTML

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia