FullScreen Background Imagen Slideshow With CSS3

Feliz año nuevo a todos! 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:

<ul class="cb-slideshow">
<li>
<span>Imagen 01</span>
<div>
<h3>re·lax·a·tion</h3>
</div>
</li>
<li><!--...--></li>
<li><!--...--></li>
</ul>

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:

.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(../images/pattern.png) repeat top left;
}

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:

.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
animation: imageAnimation 36s linear infinite 0s;
}

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:

li .cb-slideshow div {
z-index : 1000 ;
posición : absoluta ;
inferior : 30px ;
izquierda : 0px ;
ancho : 100% ;
text-align : centro ;
opacidad : 0 ;
Color : #fff ;
animación : titleAnimation 36 s lineales infinitos 0 s;
}
.cb-slideshow div li h 3 {
font-family : 'BebasNeueRegular' , 'Arial Narrow' , Arial , sans-serif ;
font-size : 240px ;
relleno : 0 ;
line-height : 200px ;
}

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:

.cb-slideshow li:nth-child(1) span {
background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(../images/2.jpg);
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(../images/3.jpg);
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(../images/4.jpg);
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(../images/5.jpg);
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(../images/6.jpg);
animation-delay: 30s;
}

.cb-slideshow li:nth-child(2) div {
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
animation-delay: 30s;
}

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

@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
8% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}

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%:

@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}

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:

.no-cssanimations .cb-slideshow li span{
opacity: 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 MediaQueries con el fin de establecer el tamaño de fuente más pequeño en anchos específicos:

@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}

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:

@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}

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:

@keyframes titleAnimation {
0% {
opacity: 0;
transform: translate200px);
}
8% {
opacity: 1;
transform: translate0px);
}
17% {
opacity: 1;
transform: translate0px);
}
19% {
opacity: 0;
transform: translate-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}

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