Scroll de imágenes o texto (Tutorial Marquee HTML) ~ Chuck Aileron

Puedes crear una genial barra desplazadora de imágenes o texto (o lo que quieras en realidad), para ésto, usamos la etiqueta marquee, cual hará que un elemento se desplace por la pantalla una y otra vez. El ancho, alto, dirección de desplazamiento, color de fondo, tiempo de demora y varios factores más pueden ser editados agregado algunos atributos a la etiqueta, como también podemos crear un código CSS para darle forma a la barra o bien usar el atributo style dentro de la etiqueta. Entremos en terreno.

Éste es un ejemplo:

El Blog del Chuck~

Si deseamos darle algunos estilos (color de letra, tipo de letra, etc) podemos usar el atributo style dentro de la etiqueta (<marquee style="Definición de estilos">). También puedes hacer un CSS, como yo hice en este caso. Agregándolos al principio del post con la etiqueta <style> o bien dentro de la estructura HTML de tu blog, antes de ]]></b:skin>. Yo creé las siguientes características:

<style>
.marqueecss1{
background: #cacaca;
width: 50%;
font-family: Arial;
font-size: 15px;
}

.marqueecss2{
color: white;
width: 50%;
font-family: Arial;
font-size: 15px;
}
</style>

Donde .marqueecss1 tendrá un fondo de color, 50% del tamaño de ancho y la fuente estipulada con ese tamaño. Por el contrario, .marqueecss2 tendrá texto color blanco, 50% del tamaño de ancho y la fuente estipulada con ese tamaño. Para usar el CSS llamamos a la clase que creamos (.marqueecss1 o .marqueecss2) escribiendo lo siguiente en la etiqueta:

<marquee class="marqueecss1">TEXTO O FOTO</marquee>

A partir de este concepto, podremos crear una barra deslizante original y acorde a nuestros gustos.

Ahora podemos editarlo agregando cualquiera de los siguientes atributos a la etiqueta marquee. Los atributos del marquee son los siguientes:

Align: Permite alinear el texto que rodea la marquesina. Puede tener los siguientes valores:

top (arriba)
middle (centrado)
bottom (abajo)

Ejemplo: No hay ejemplo porque sinceramente no entiendo cómo funciona XDDD, con todos los valores me queda lo mismo, así que me rindo y me hago el desatendido con ésto :v

Behavior: Define el comportamiento del marquee. Define de qué manera se va a efectuar el desplazamiento. Puede tener los siguientes valores:

scroll: Aparece por un lado, se desplaza hasta el otro, desaparece y vuelve a empezar. Valor por defecto.
slide: Aparece por un lado, se desplaza y se detiene.
alternate: Se desplaza alternativamente hacia un lado y el otro (rebota al llegar al final de cada lado).

Ejemplo (alternate):
El Blog del Chuck~

Bgcolor: Permite agregar un fondo de color al marquee. Se usa igual que la propiedad background en un CSS, agregando el color en hexadecimal. Por ejemplo: #FFFFFF (blanco).

Ejemplo (bgcolor="green")(Ésta usa la clase marqueecss2):
El Blog del Chuck~

Direction: Define la dirección que tomará el elemento (texto, imagen, etc). Puede tener los siguientes valores:

left (izquierda) (valor por defecto)
right (derecha)
up (arriba)
down (abajo)

Ejemplo (down) (también tiene un scrolldelay en 200 para dejarlo más lento):
El Blog del Chuck~

Width: Define el ancho del marquee. Su valor puede expresarse en pixeles (px) o porcentaje (%).

Ejemplo (width="120px"):
El Blog del Chuck~

Height: Define el alto del marquee. Su valor puede expresarse en pixeles (px) o porcentaje (%).

Ejemplo (height="40px"):
El Blog del Chuck~

Loop: Indica el número de veces que aparecerá el texto. Por defecto es infinito. Si se le da un valor, terminada su última aparición, el texto dejará de mostrarse.

Ejemplo (loop="10", el texto aparecerá 10 veces):
El Blog del Chuck~

Scrollamount: Controla el movimiento del texto por pixel entre frames. Su valor mínimo es 1, donde el texto tendrá el movimiento más lento.

Ejemplo (scrollamount="2"):
El Blog del Chuck~

Scrolldelay: Define el tiempo entre cada movimiento expresado en milisegundos. Mientras más alto el número, más lento es el movimiento.

Ejemplo (scrolldelay="300"):
El Blog del Chuck~

Ahora veamos el caso de las imágenes. Lo ideal es que las medidas de las imágenes sean las mismas.

Acá es tan simple como escribir lo siguiente:

<marquee><img src="URL DE LA IMAGEN"/></marquee>

Si deseas tener más imágenes, puedes agregar más veces la etiqueta <img src="URL DE LA IMAGEN"/>.

También puedes hacer que al posicionar el cursor en alguna imagen, esta se detenga. Ésto se vería de la siguiente manera (posiciona el cursor en el scroll de imágenes):