Breaking

Post Top Ad

Your Ad Spot

viernes, 21 de septiembre de 2018

Animacion Mover una Imagen con CSS

 

Hoy en día, muchos sitios web tienen animaciones de imágenes en movimiento. Este no es diferente. Este tipo de animaciones son bastante fáciles de codificar y te mostraré en tres sencillos pasos.
Paso 1

Para esta animación, tomé una imagen de nubes y la animé. Haz un div y dale a la imagen de la nube como su imagen de fondo. Luego, encierra el div dentro de otro div que servirá como envoltorio div.
HTML

<div id="sky">
<div id="clouds"></div>
</div> 
 
 
CSS

#clouds {
background-image: url('pic.jpg');
background-size: cover;
}


Paso 2

Proporcione el ancho de div de la imagen al 200% de modo que solo veamos el 100% (es decir, la mitad de la imagen) en la pantalla a la vez, para ver una imagen continua mientras la imagen se desplaza.

Give overflow: hidden al div externo para evitar la barra de desplazamiento horizontal (ya que el ancho de la div de la imagen es dos veces el ancho de la pantalla).

CSS

#sky {
overflow: hidden;
}
#clouds {
width: 200%;
height: 400px;
background-image: url('pic.jpg');
background-size: cover;
}
 
Paso 3

Ahora es el momento de la animación. Para eso, se usa la regla @keyframes. La
idea es colocar el extremo izquierdo de la imagen en el margen
izquierdo: 0px al comienzo de la animación y en el margen izquierdo:
-100% al final de la animación. Como un efecto de esto, la
primera mitad de la imagen es visible cuando la animación comienza, y la
segunda mitad de la imagen es visible ya que la animación está completa
al 100%.

Finalmente, para hacer que la imagen dure para siempre, dé el valor infinito a la animación de la propiedad. Llamé a la animación 'moving clouds' y la duración de la animación 25 segundos. Cuanto mayor sea la duración de la animación, menor será la velocidad de la animación.

Entonces, el código final se da a continuación.

HTML
 
HTML
<div id="sky">
<div id="clouds"></div>
</div>
CSS
#sky {
overflow: hidden;
}
#clouds {
width: 200%;
height: 400px;
background-image: url('pic.jpg');
background-size: cover;
-webkit-animation: movingclouds 25s linear infinite;
-moz-animation: movingclouds 25s linear infinite;
-o-animation: movingclouds 25s linear infinite;
}
@keyframes movingclouds {
0% {margin-left: 0%;}
100% {margin-left: -100%;}
}


No hay comentarios.:

Publicar un comentario

Post Top Ad

Your Ad Spot

Páginas