-->

Scroll de texto e imágenes


Muchas veces tenemos la necesidad de poner un texto en movimiento en nuestra página.
Esto recibe el nombre de Scroll.

La etiqueta <marquee> nos permite crear diferentes formas de hacerlo.
Basta con añadir a esta etiqueta los atributos que queramos
¡Y ya tenemos nuestra 
marquesina con movimiento!
Para añadirla nos tendremos que ir nuestra entrada y HTML e insertar esté código.


   <marquee behavior="scroll" direction="left">Texto que queramos</marquee>
Y así quedará nuestro texto.

Texto que queramos 

Cambiando el código direction="left" por la dirección que queramos.
Left: izquierda Right :derecha

Texto que queramos

Esto también lo podemos hacer con una o varías imágenes.
Tendremos que insertar esté código como el anterior pero incluyendo la Url de la imagen que queramos.

<marquee behavior="scroll" direction="left">
<img src="http://esphoto500x500.mnstatic.com/playa-la-bonita_468186.jpg" alt="Nuestro texto">
</marquee>

Y así es como nos quedará


Nuestro texto


Para añadir varías imágenes y con enlace esté será el código

<marquee direction="up" scrollAmount="1" style="background-color: #CCCCCC; text-align: center;width:100px;height:150px;border:2px solid #cccccc;padding:3px" onMouseover="this.scrollAmount='0'" onMouseout="this.scrollAmount='1'"> 
<a href="URL del enlace" title="texto"><img src=" aquí url imagen"</a> <br> 
<a href="URL del enlace" title="texto"><img src="aquí url imagen"</a> 
</marquee> 

Esto para modificar el color, la velocidad de la imagen el ancho y alto del scroll habría que cambiar estos datos.

Marquee direction="up" es la dirección en la que se muestran las imágenes.
En este caso arriba.

background-color: #CCCCCC Lo sustituimos por el color que queramos para el fondo, puedes ver todos los colores aquí o si lo deseamos lo podemos poner transparente.
"background-color: transparent
scrollAmount="1" Podemos varíar el número según velocidad de las imagenes que deseemos.
width:100px Modificamos el valor 100px para el ancho del scroll.

height:150px Modificamos el valor150px para la altura del scroll podemos también variar su tamaño. 
border:2px Cambiamos 2px según el grosor del borde que queramos.

solid #cccccc Es el color del borde y podemos poner el que queramos.
Donde dice "URL del enlace" debemos añadir la url de la página a enlazar. 
En "texto" añadimos el texto que aparecerá al pasar el mouse por encima del enlace. 
Para añadir la imagen lo podemos hacer en "aquí url imagen" Para seguir agregando imágenes tienen que copiar <br> (que significa bajar un renglón) y pegar este código antes del cierre de </marquee>:
<a href="URL del enlace" title="texto"><img src="aquí url imagen"</a>

Y así es como nos quedará




Publicar un comentario

1 Comentarios

  1. Muy buena explicación. Gracias. Solo que mis imágenes salen cortadas que puedo hacer para que salgan completas?

    ResponderEliminar

En breve revisaremos tu comentario para poder publicarlo.
Muchas gracias