La etiqueta html <marquee> by Anatomia de las ciberpaginasLa etiqueta html <marquee> se utiliza para insertar un área de texto en movimiento.
También se la conoce con el nombre de marquesina.
La etiqueta <marquee> nos resulta de gran utilidad para dar un efecto diferente a los texto de nuestra página Web. Esta etiqueta nos permite realizar una animación sencilla en una página web. Como animar una imagen o hacer texto en moviendo sólo con HTML.
Gracias a la etiqueta html
<marquee>podemos conseguir el efecto estético de texto en movimiento.
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:
1. Marquee no está comprendido en los estándar HTML
2. Utilizar Marquee puede tener problemas de accesibilidad, es decir, se puede hacer difícil de leer para determinadas personas con discapacidades.
3. 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 aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio <marquee> y su cierre </marquee>.
Obsoleto: Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.
El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:
| Atributos | valor | efecto |
|---|---|---|
| desplazarse (predeterminado) / deslizar / alternar | Gracias a este atributo podemos dar nuevos efectos a la marquesina, el cual es el encargado de establecer cómo se desplazará el texto dentro del elemento de marquesina de entre los valores posibles que son: scroll, slide, y alternate. |
|
| color / #… | Establece el color de fondo, puede utilizarse el nombre, o bien un valor RGB de dicho color. | |
| Los valores posibles son: left (para moverse hacia la izquierda) / right (para moverse a la derecha) / up (hacia arriba) / down (hacia abajo) | Establece la dirección de desplazamiento del texto en el marco. |
|
| px / percent | Establecer altura en píxeles o valor porcentual | |
| px / percent | Establecer margen horizontal | |
| −1 (valor predeterminado de desplazamiento continuo) / n (número) | Determina el número de ciclos que que va a moverse el texto o lo que quiera que haya dentro de la marquesina. Este atributo sólo funciona en Internet Explorer y nos determina si el movimiento se repetirá o no. Si queremos que el movimiento sólo se repita unas veces determinadas debemos indicárselo con un número, que será el número de veces que se repita. Si queremos que ejecute sólo 3 ciclos, su loop será el siguiente: <marquee loop=”3″> </marquee> que querrá decir que la marquesina sólo realizará tres ciclos o movimientos y luego se detendrá. Si queremos que se repita debemos usar “infinite” o “-1”. De hecho, |
|
| 6 (valor predeterminado) | Es la cantidad de pixel que tiene que desplazarse el contenido de la marquesina cada vez que se desplaza. 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". | |
| 85 (valor por defecto) | Éste configura la velocidad del texto que está dentro de la marquesina. Cada desplazamiento se expresa en milisegundos. A menor numeración, mayor velocidad. Es decir, un texto consumiirá más milisegundos en desplazarse, si el scrolldelay es 5, que si el scrolldelay es 20. Nota: |
|
| digital | ||
| px / percent | Establecer margen vertical en pixeles o en un valor porcentual. | |
| px / percent | Configura la anchura de la marquesina en pixeles o en un valor porcentual. 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. |
onbounce behavior está establecido en alternate. onfinish loop. El evento se lanza solo si el atributo loop tiene un valor mayor a 0. onstart Ya enunciados los atributos, vamos entonces a empezar a aplicarlos para comprobar cómo funcionan en la práctica. Posteriormente, en la sección siguiente, pasaremos a hacer los ejercisios.
Empezamos con las medidas que son las viejas conocidas WIDTH y HEIGHT que toman valores en píxeles o en porcentajes de pantalla.
|
<BODY>
<MARQUEE WIDTH=70% HEIGHT=40> HOLA MUNDO </MARQUEE> </BODY> |
Que se verá con 70% de ancho (del cuadro azul que para los efectos es como si fuera la pantalla completa) y 40 px de alto.
|
|
El color de fondo quedará curioso. Echamos mano del atributo BGCOLOR.
|
<BODY>
<MARQUEE BGCOLOR=#7070ff> HOLA MUNDO </MARQUEE> </BODY> |
|
|
El atributo BEHAVIOR es el que da más juego, su valor por defecto es scroll que significa que aparece por la derecha, se va a la izquierda y de forma continuada. Si le damos el valor slide y alternate tenemos:
|
<BODY>
<MARQUEE BEHAVIOR=slide> HOLA MUNDO </MARQUEE> </BODY> |
|
|
Nota: Para verlo funcionar, "debes actualizar la página" ya que al pararse y funcionar sólo una vez, no lo vemos.
|
<BODY>
<MARQUEE BEHAVIOR=alternate> HOLA MUNDO </MARQUEE> </BODY> |
|
|
DIRECTION servirá para definir hacia donde mando el texto que, por defecto, va hacia la izquierda. Yo puedo mandarlo a la derecha así:
|
<BODY>
<MARQUEE DIRECTION=right> HOLA MUNDO </MARQUEE> </BODY> |
|
|
O hacia arriba o abajo con down y up.
|
<BODY>
<MARQUEE HEIGHT=50 DIRECTION=up> HOLA MUNDO </MARQUEE> </BODY> |
|
|
La velocidad de desplazamiento varía con SCROLLAMOUNT, que marca los saltos según el valor numérico; y SCROOLDELAY que determina el retraso en el movimiento en milisegundos. Veámoslo:
|
<BODY>
<MARQUEE SCROLLAMOUNT=40> HOLA MUNDO </MARQUEE> </BODY> |
|
|
Mareante...
|
<BODY>
<MARQUEE SCROLLDELAY=1000> HOLA MUNDO </MARQUEE> </BODY> |
|
|
Y este desespera (le he puesto 1000, que es un segundo).
El atributo LOOP (indefinido por defecto, como ya hemos visto), define el número de veces que vamos a ver moverse el texto.
|
<BODY>
<MARQUEE LOOP=2> HOLA MUNDO </MARQUEE> </BODY> |
|
|
Tendremos que actualizar la página.
Los atributos HSPACE Y VSPACE los conocemos, definirían el espacio horizontal y vertical del texto fuera de la marquesina.
|
<BODY>
<MARQUEE BGCOLOR=yellow VSPACE=20> HOLA MUNDO </MARQUEE> Otro texto. </BODY> |
|
Otro texto
|
Ni que decir tiene que podemos aplicar otras etiquetas como la de centrado, por ejemplo. Le pondremos color para que se distinga del fondo.
|
<BODY>
<CENTER> <MARQUEE WIDTH=50% BGCOLOR=#ffff00> HOLA MUNDO </MARQUEE> </CENTER> </BODY> |
|
|
Mira esto que bonito que queda con la etiqueta <FONT>:
|
<BODY>
<CENTER> <MARQUEE WIDTH=70% BGCOLOR=#ffff00> <FONT FACE=arial COLOR=red SIZE=5> HOLA MUNDO </FONT> </MARQUEE> </CENTER> </BODY> |
|
|
Se explicará en este artículo cómo puedes animar texto con la etiqueta de marquee.
Vamos a ilustrar estas animaciones utilizando los ejemplos mostrados a continuación.
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.
Añadiremos el atributo "direction" con el valor "right", como a continuación
<marquee direction="down"> HOLA MUNDO </marquee> <marquee direction="up" behavior="alternate" style="height:70px"> HOLA MUNDO </marquee>
Observa el ejemplo para entenderlo mejor.
<marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">HOLA MUNDO</marquee></marquee> <marquee behavior="alternate" direction="up" width="80%">
<marquee direction="right" behavior="alternate"> HOLA MUNDO </marquee>
</marquee>
<font color="WHITE"><marquee direction="left" style="bgcolor:red"> HOLA MUNDO </marquee></font> <marquee style="border:purple 4px SOLID;padding-top:3px;background-color:yellow;padding-bottom:3px;margin-left:10px;margin-right:10px"> HOLA MUNDO </marquee>
Usando la etiqueta marquee, de la misma manera se pueden insertar imágenes, con o sin texto. Se expone un ejemplo muy simple a continuación:
<marquee>Texto elegido aqui <img src="http://www.etutoriale.ro/banners/88x31.gif" width="88" height="31" alt="Tutorials " border="0"></marquee> Texto precedente <marquee WIDTH="20%"><img src="http://www.etutoriale.ro/banners/88x31.gif" width="88"
height="31" alt="Tutorials " border="0"></marquee> Texto siguiente Podemos poner varias frases si colocamos <P> o <BR> dentro.
|
<BODY>
<MARQUEE> HOLA <P> MUNDO </MARQUEE> </BODY> |
|
|
|
|
<table border=0><tr><td width=400>
<DIV CLASS="bloc"><p><MARQUEE bgcolor=#ffff00>
<table border=2 align=center><tr><td width=200>
<center>
HOLA MUNDO</center>
</div></td></tr></table></MARQUEE><P>
</td></tr></table><p>
|
|
<MARQUEE direction="down" width="250" height="90" behavior="alternate" style="border:solid">
<MARQUEE behavior="alternate">
HOLA MUNDO</MARQUEE></MARQUEE>
¿Como hacerlo al poner el cursor encima? Independientemente de los atributos puestos a la etiqueta Marquee, el onmouseover hace que se detenga el texto al poner el cursor encima y el onmouseout se añade para que al quitarse el ratón, vuelva a avanzar.
<marquee behavior="alternate" direction="up" width="80%">
</marquee onmouseout="this.start();" onmouseover="this.stop();" >
Este texto va a animarse y detenerse al poner el cursor encima...
<marquee>
