Marquee scroll move

En este artículo vamos a utilizar la etiqueta marquee para realizar una animación sencilla en una página web. Como animar una imagen o hacer que el texto se mueva sólo con HTML.

La etiqueta marquee se utiliza de la siguiente forma:

<marquee>--YOUR CONTENT---</marquee>

Este elemento HTML soporta una serie de atributos:

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

width -> Anchura de la marquesina.

height -> Altura de la marquesina.

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

hpspace y vspace -> Estos dos atributos sirven para definir el número de píxels que debe aparecer entre la marquesina y otros contenidos de la página, en horizontal y vertical.

En los ejemplos que vamos a ver en funcionamiento hemos creado 2 marquesinas. Una en la cabecera de la página ocupando prácticamente todo el ancho y con dirección izquierda.

<marquee direction="left" width="880px" height="30px" scrollamount="4" scrolldelay="100" onMouseOver="stop()" onMouseOut="start()">        
   ---CONTENIDO QUE SE MUEVE EN LA CABECERA---
</marquee>

Y la otra marquesina la colocamos en la sidebar o columna izquierda para presentar otra posibilidad que es la movilidad de la marquesina en dirección hacia arriba.

<marquee direction="up" width="190" height="600" scrollamount="4" scrolldelay="100" onMouseOver="stop()" onMouseOut="start()">        
   ---CONTENIDO QUE SE MUEVE EN LA SIDEBAR---
</marquee>

El efecto que se produce es hacer scroll automático (vertical o horizontalmente) hasta que se pase el ratón por encima de la marquesina.

Ver módulo de noticias en marquesina para Prestashop

Ver el ejemplo en funcionamiento