"Tous les chemins mènent à Rome" est une expression qui peut s'appliquer au Web. En effet, il existe toujours plusieurs solutions et différentes approches qui permettent d'arriver au résultat final. L'important est d'y arriver!
Pour afficher un diaporama dans une page Web, plusieurs options s'offrent à vous:
- ajouter une extension à votre CMS préféré,
- utiliser un composant du framework de votre site Web (Bootstrap, Foundation, etc.),
- suivre un tutoriel pour apprendre à créer votre diaporama en CSS (et sans rien d'autre)!
Si vous êtes ici, c'est que seule la dernière option vous intéresse!
La structure HTML du diaporama
Commençons par créer un conteneur dans lequel on place les images que l'on souhaite afficher dans le diaporama:
<div class="diaporama">
<img src="images/photo-1.jpg" alt="photo-1" width="" height="" />
<img src="images/photo-2.jpg" alt="photo-2" width="" height="" />
<img src="images/photo-3.jpg" alt="photo-3" width="" height="" />
<img src="images/photo-4.jpg" alt="photo-4" width="" height="" />
<img src="images/photo-5.jpg" alt="photo-5" width="" height="" />
</div>Avouez qu'il est difficile de faire plus simple !
Les styles CSS du diaporama
Les styles vont dépendre du nombre d'images contenues dans le diaporama. Dans cet exemple, il y a 5 diapositives. Les durées d'animation dépendent également de la durée d'affichage de chaque image. Ici, chaque image sera affichée durant 6 secondes. Le diaporama effectuera donc un cycle complet en 30 secondes (5 images x 6 secondes = 30 secondes).
Tout d'abord, l'animation qui contrôle le fondu:créer un diaporama en CSS
@keyframes slideshow__fade {
0% {
opacity: 0;
z-index: 2;
}
6.6666666667% {
opacity: 1;
}
26.6666666667% {
opacity: 1;
}
27.6666666667% {
opacity: 0;
z-index: 1;
}
100% {
opacity: 0;
}
}Ensuite, le style de l'élément parent: les images sont empilées afin qu'elles puissent être affichées avec un fondu enchaîné. Elles sont donc positionnées de manière relative, par rapport à leur conteneur parent:
.diaporama {
position: relative;
}Ensuite, les images sont stylisées, pour obtenir un positionnement absolu et pour appliquer l'animation. Ici, la première diapositive n'est pas positionnée de manière absolue. Le diaporama prendra donc la hauteur de la première image. Naturellement, le diaporama s'affichera de manière harmonieuse si toutes les images sont de même hauteur.
.diaporama img:not(:first-child) {
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
animation-duration: 30s; /*On retrouve nos 30 secondes ici */
animation-fill-mode: both;
animation-iteration-count: infinite;
animation-name: slideshow__fade;
animation-timing-function: ease-in;
transition: opacity 2s ease-in;
}Et enfin, nous différons l'affichage des images suivantes afin qu'elles commencent à s'estomper en séquence. La première image s'affiche immédiatement. La deuxième image s'affiche après 6 secondes, et ainsi de suite:
.diaporama img:nth-child(1) {
animation-delay: 0s;
}
.diaporama img:nth-child(2) {
animation-delay: 6s;
}
.diaporama img:nth-child(3) {
animation-delay: 12s;
}
.diaporama img:nth-child(4) {
animation-delay: 18s;
}
.diaporama img:nth-child(5) {
animation-delay: 24s;
}Démocréer un diaporama en CSS
Quelques conseils utiles
- Privlégiez, quand c'est possible, le format .webp pour vos images
- Utilisez des images aux dimensions identiques dans votre diaporama, c'est plus joli
- N'oubliez pas de renseigner pour chaque image, leur balise
alt
Et voilà, c'est déjà fini!
Comme promis, vous avez appris comment créer un diaporama en CSS et comme promis ça s'estompe, c'est en pur CSS, c'est léger et c'est simple !
Si cette solution pure CSS vous a plu, n'hésitez pas à en parler à vos ami.es qui pourraient en avoir besoin !
google
