Marquesinas en html5

Hace unos días necesité poner una marquesina en una web, y pensé en hacerla como una animación de CSS, pero consideré que era algo suficientemente común y atractivo como para que no hubiera una forma más sencilla, y buscando encontré una de esas etiquetas de html que casi nunca se utilizan, la etiqueta en cuestión es <marquee></marquee> y funciona de una forma muy muy sencilla como podéis ver y su uso básico es realmente sencillo:

<marquee></marquee>

Que nos da como resultado: Hola, esto es una prueba de marquee
Naturalmente a esta etiqueta se le pueden poner estilos, CSS y de ese modo darle mucha vistosidad, aunque aquí solo pondré un toque para que lo veais:

<marquee style="color:blue; text-shadow:5px 5px 5px purple;"></marquee>

Y su resultado: Hola, esto es una prueba de marquee Lo interesante de esta etiqueta además son sus atributos que pueden hacer una gran variedad de efectos dependiendo de sus atributos como vamos a ver a continuación:

direction

Con este atributo podemos definir hacia donde queremos que se dirija la marquesina, el valor por defecto e left, pero podemos utilizar right, up o down para conseguir los siguientes resultados:

right
Hola, esto es una prueba de marquee hacia la derecha
up
Hola,
esto es una prueba de marquee
hacia
arriba
down
Hola,
esto es una prueba de marquee
hacia
abajo

scrolldelay

Con este atributo podemos marcar que tiempo espera la marquesina entre movimiento y movimiento expresado en milisegundos, como podemos ver en los siguientes ejemplos:

Voy a una velocidad de 10
Voy a una velocidad de 100
Voy a una velocidad de 200

Loop 

Nos indica el número de veces que se repetirá el movimiento: Solo pasaré 5 veces!!!!

scrollamount

Impone una cantidad de movimiento en cada paso de avance  Me muevo a un scrollamount de 10
Me muevo a un scrollamount de 20
Me muevo a un scrollamount de 30

behavior

Este atributo consiste en marcar el comportamiento de la etiqueta, generalmente scroll, que es el que tiene por defecto (aparece, pasa y vuelve a aparecer) pero podemos utilizar también el valor alternate, el cual hace que aparezca se desplace hasta el final y regrese:
behavior alternate

Naturalmente no solo se puede utilizar texto en nuestras marquesinas, como todo curioso ya habrá empezado a preguntarse, se puede introducir cualquier tipo de código en su interior, desde etiquetas hX, hasta tablas, imágenes...


Pero eso no es todo, seguro que la mente de más de uno de los lectores de esta entrada se estará preguntando, "¿puedo cambiar el comportamiento de esto con javascript?" y la respuesta es que sí de foma muy sencilla como vemos en el siguiente ejemplo...
Pulsa en los enlaces para cambiar mi dirección Hacia la izquierda Hacia la derecha 

Y el código sería algo tan sencillo como esto:

<marquee direction="left" id="ejemplo">
Pulsa en los enlaces para cambiar mi dirección
</marquee>

<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='left';">
  Hacia la izquierda
</a>
<a href="javascript:void(0);" onclick="getElementById('ejemplo').direction='right';">
  Hacia la derecha </a>

 
Como podemos ver hay una miríada de opciones para trabajar con esta etiqueta tan desconocida y que nos puede ahorrar mucho trabajo... espero que no os hayáis mareado mucho y que os sirva para vuestros proyectos!!