Faire un diaporama fondu sans javascript avec les animations css

Je partage un mini tuto aujourd'hui sur comment faire un slideshow (diaporama) super simplement avec les animations css, et surtout sans JS.

Pour ce faire, on va partir du DOM suivant:

<div class="Slideshow">
    <div class="Slideshow-Content">
        <img src="/img/image1.png" />
        <img src="/img/image2.png" />
        <img src="/img/image3.png" />
    </div>
</div>

Et enfin, le code CSS (ici en Sass):

.Slideshow {
    height: 300px;
    width: 300px;
    overflow: hidden;

    &-Content {
        position: relative;
        height: 100%;

        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;

            animation-name: fadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: 15s;
            animation-direction: alternate;
        }

        img:nth-of-type(1) {
            animation-delay: 10s;
        }
        img:nth-of-type(2) {
            animation-delay: 5s;
        }
        img:nth-of-type(3) {
            animation-delay: 0s;
        }
    }

    @keyframes fadeInOut {
        0% {
            opacity:0;
        }
        30% {
            opacity:0;
        }
        35% {
            opacity:1;
        }
        65% {
            opacity:1;
        }
        70% {
            opacity:0;
        }
        100% {
            opacity:0;
        }
    }
}

Pour la petite explication du css, dans un premier temps on utilise les width/height et positions absolute et relatives pour positionner les images les unes sur les autres.

La vraie magie opére dans les lignes suivantes. L'animtion que l'on déclare se déroule en 3 stages. Pour le premier tiers (0% a 30%), l'image est cachée. Pour le second tiers (35% a 65%), l'image est affichée, et enfin pour le dernier tiers (de 70 a 100%), l'image est cachée a nouveau.

On va ensuite déclarer nos images avec cette animation, d'une durée de 15 secondes. Le secret tiens dans le animation-delay qui décale les début d'animations de 5 secondes a chaque nouvelle image.

Ainsi, la premiére image sera affichée 5 secondes, puis la seconde 5 secondes, et enfin la derniére. A chaque fois, il y aura un fondu entre les deux car on fait appraitre la nouvelle image progressivement au fur et a mesure que l'on cache l'ancienne.

Et voila, en 5 min, on a réalisé un diaporama ultra simple, seulement avec du CSS et sans aucun JS!

Tags:

Java Script