Créez un diaporama animé en CSS pur.

Bonjour mes amis!

Fatigué de JS, passez au CSS!

Défi

Créez un diaporama animé en utilisant CSS. Les diaporamas peuvent être utilisés, par exemple, lors d'occasions spéciales pour afficher des photos sur l'écran via le projecteur. Grâce au bouclage, les photos affichées peuvent servir de toile de fond pour un discours solennel.

Solution possible

Pour le diaporama, nous prendrons l'étrange "photo macro" Paweł Czerwiński (ils sont cool).

Alors allons-y.

Notre balisage ressemblera à ceci:

<div class="slideshow"> <img src="https://thebestcode.ru/media/animatedSlideshow/1.jpg" alt="#" class="i_1"> <p class="p_1">a-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/2.jpg" alt="#" class="i_2"> <p class="p_2">b-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/3.jpg" alt="#" class="i_3"> <p class="p_3">c-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/4.jpg" alt="#" class="i_4"> <p class="p_4">d-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/5.jpg" alt="#" class="i_5"> <p class="p_5">e-slide</p> <img src="https://thebestcode.ru/media/animatedSlideshow/6.jpg" alt="#" class="i_6"> <p class="p_6">f-slide</p> </div> 

Qu'observons-nous ici?

Les photos sont enveloppées dans une classe de diaporamas, qui est utilisée pour aligner les éléments horizontalement et verticalement.

.slideshow a les styles suivants:

 .slideshow { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } 

Nous avons 6 photos. Chaque photo se voit attribuer la classe "i_nombre de photos". Sous chaque photo, il y a une signature avec la classe "p_number of photo".

Img a les styles suivants:

 img { position: absolute; max-width: 90vw; max-height: 80vh; opacity: 0; animation: slideshow 36s ease-in-out infinite; } 

La durée de l'animation dépend du nombre de photos et de la durée d'affichage de chaque photo. Dans ce cas: 6 photos de 6 secondes chacune.

Passons à l'animation:

 @keyframes slideshow { from { opacity: 0; filter: grayscale(100%); } 5% { opacity: 1; filter: grayscale(50%); } 10% { opacity: 1; filter: grayscale(0); transform: scale(1.1); } 15% { opacity: 1; filter: blur(0); } 20% { opacity: 0; filter: blur(2px); transform: scale(0.9); } 25% { opacity: 0; } } 

Nous n'utilisons que 25% de l'animation, mais en six étapes. 25% est la quatrième partie, donc les photos se chevaucheront légèrement. Puisque nous mettons en œuvre l’effet «fondu en fondu en sortie», c’est-à-dire Nous travaillons avec transparence, c'est exactement ce dont nous avons besoin.

À l'aide de «filtre: niveaux de gris», nous saturons la couleur de la photo affichée (blanchie), à ​​l'aide de «transformer: échelle», nous redimensionnons la photo un peu en avant lors de la sortie et un peu en arrière lors du remplacement, en utilisant «filtre: flou», nous floutons la photo remplacée.

Ensuite, nous travaillons avec des photos individuelles:

 .slideshow .i_1 { animation-delay: 6s; transform: translateX(-100px) rotate(-3deg); } .slideshow .i_2 { animation-delay: 12s; transform: translateX(100px) rotate(3deg); } .slideshow .i_3 { animation-delay: 18s; transform: translateY(-100px) rotate(3deg); } .slideshow .i_4 { animation-delay: 24s; transform: translateY(100px) rotate(-3deg); } .slideshow .i_5 { animation-delay: 30s; transform: rotate(-6deg); } .slideshow .i_6 { animation-delay: 36s; transform: rotate(6deg); } 

Nous définissons le délai d'animation pour chaque photo (6 secondes de la première et +6 secondes de chaque suivante). Pour un changement, nous décalons et faisons pivoter chaque photo en utilisant "transformer: traduire tourner" (les valeurs ont été sélectionnées empiriquement).

Nous avons terminé la photo. Passons maintenant aux signatures.

P a les styles suivants:

 p { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #e4e4e4; text-shadow: 0 0 1px #000; text-transform: uppercase; font-size: 2.8em; opacity: 0; animation: title 36s linear infinite; } 

Le temps d'animation des légendes correspond au temps de l'animation photo.

L'animation de signature semble beaucoup plus facile:

 @keyframes title { from { opacity: 0; } 5% { opacity: 1; } 20% { opacity: 1; } 25% { opacity: 0; } } 

Nous affichons également une signature distincte en utilisant le délai d'animation:

 .slideshow .p_1 { animation-delay: 7s; } .slideshow .p_2 { animation-delay: 13s; } .slideshow .p_3 { animation-delay: 19s; } .slideshow .p_4 { animation-delay: 25s; } .slideshow .p_5 { animation-delay: 31s; } .slideshow .p_6 { animation-delay: 37s; } 

Veuillez noter que le délai d'animation des sous-titres est supérieur de 1 seconde aux valeurs de photo correspondantes. Ceci est fait afin d'afficher les légendes après l'apparition et la transformation d'une photo particulière.

C’est tout. À mon avis, cela s'est avéré simple, mais intéressant.

Le résultat peut être vu ici .

Merci de votre attention. Mes meilleurs vœux.