About Taringa!

Popular channels

Animación CSS3 || Slider Background(animacion en el fondo)


Hoy vamos a crear una imagen de fondo de pantalla completa de diapositivas-CSS solamente. Crearemos diferentes transiciones de imágenes y también hacemos un título aparece usando animaciones CSS.



EL MARCADO DE

Usaremos una lista desordenada de las diapositivas y lo añadiremos un lapso para cada imagen y una división con un título:

Las luces van a ser los elementos que tendrán las imágenes de fondo de la presentación.

EL CSS

Vamos a la lista desordenada Estilo primera. Se fijará y se extenderá por encima de la ventana gráfica. También utilizaremos una: después de pseudo-elemento con el fin de colocar un patrón en la parte superior de la imagen:



Vamos a utilizar un patrón de puntos repetida pero se podía también utilizar, por ejemplo, un gradiente css con cierta transparencia.
El lapso que contendrá una imagen de diapositivas se posicionará absoluta y tener una anchura y altura de 100%. Ya que tenemos un poco de texto en el interior, vamos a hacer que el color transparente porque no queremos verlo. El valor de la propiedad background-size "tapa" se asegurará de que la imagen de fondo cubre toda el área del elemento y por lo tanto es el tamaño de la pantalla, que cubrirá toda la ventana gráfica visible. La opacidad se pone a 0 y luego vamos a cambiar eso en nuestra animación:



La animación para cada tramo tendrá una duración de 36 segundos y ejecutar un número inifinite de veces. Pero echemos un vistazo a los detalles en un tiempo, en primer lugar, vamos a labrar la división con el siguiente titular:



La animación de la división de título también tendrá 36 segundos.
Ahora, vamos a definir las imágenes de fondo para todos los tramos y el retardo de la animación, de modo que cada imagen siguiente diapositivas y título aparecen después de 6 segundos de la anterior:



Ahora, vamos a echar un vistazo a la animación de diapositivas. Cada tramo tendrá un tiempo de animación de 36 segundos. En esos 36 segundos, cambiaremos la opacidad de 0 a 1 cuando la animación alcanza el 8%. Y luego esta opacidad se mantiene hasta que se alcanzan 17%. Cuando se alcanza el 25% de la opacidad ya debería ser 0 otra vez y permanecer así hasta el final.
Ahora, ¿por qué esos valores? Queremos que cada imagen sea visible durante 6 segundos y sabemos que al final de un ciclo, queremos que la primera imagen para mostrar de nuevo. Tenemos 6 imágenes, por lo que necesitaremos 36 segundos para un ciclo completo para terminar. Ahora, tenemos que "tiempo" los valores de opacidad en consecuencia. Sabiendo que nuestra segunda imagen será empezar a animar a los 6 segundos que necesitamos saber en qué percentil de la animación para ello será necesario la primera imagen a desaparecer. La división de 6 por 36 nos da 0.166 ... que sería el 16% de nuestro paso de fotogramas clave. Ahora, porque no queremos que nuestra imagen sólo se desvanecen todo el tiempo, vamos a definir un paso intermedio, que vamos a establecer en la mitad de lo que se calculó, es decir, el 8%. Ese es el punto que queremos mostrar la imagen por completo y sólo quiero empezar desvanecimiento hacia fuera en un 17%, haciéndolo desaparecer por completo en el 25%.



Tenemos el mismo razonamiento por el título, al igual que queremos que desaparezca un poco más rápido, por lo tanto, la opacidad 0 a 19%:



Para los navegadores que no soportan animaciones, vamos a simplemente mostramos la imagen de diapositivas última estableciendo la opacidad de la duración a 1:



La no-cssanimations clase se añade por Modernizr .

Vamos así cuidar de tamaño de fuente del título cuando la ventana es menor. Usaremos con el fin de establecer el tamaño de fuente más pequeño en anchos específicos:



And that’s all for the simple version of the slideshow! Now, let’s see how we can spice up the transitions a bit.

Ejemplo ANIMACIÓN ALTERNATIVA

Ahora, podemos jugar un poco con las animaciones para mostrar las imágenes y sus títulos.
La siguiente animación hará que la imagen de la escala un poco y gire ligeramente:



El título se deslizará por la derecha (que tendremos que cambiar el texto a alinear para la división de título para "right", y desaparecer deslizando hacia la left y el out:



Hay muchas posibilidades para las transiciones de imágenes y de título, sólo experimentar!




0No comments yet
      GIF