Faire apparaître ses div progressivement en fondu avec css ou jquery

Pour faire apparaître du texte, ou une div toute entière de manière progressive, on a plusieurs choix: en css ou jquery.

En css

Imaginons que j’ai plusieurs div dans la page, je leur ai mis une classe : vignets Voici le code css pour pour faire apparaitre l’ensemble de vos éléments en fade in;

.vignets {
    
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari et Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* sur Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* sur Safari et Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* sur Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

Avec jQuery

Nous avons aussi la possibilité de faire la même chose avec jquery, avec beaucoup moins de code. Dans la page concernée, placer le script suivant:

<script>
    
     $(function() {
        $(".vignets").addClass("load");
    });
    

</script>

Comme on le voit jquery vient rajouter une classe « load », qu’on peut nommer comme on veut d’ailleurs, rien a rajouter dans la partie html.  Il suffit ensuite de reprendre le même code qu’en css, simplifié cette fois, en précisant l’opacité de notre nouvelle classe et la durée de transition:

.vignets {
    opacity: 0;
   
    -webkit-transition: opacity 2s ease-in;
    -moz-transition: opacity 2s ease-in;
    -o-transition: opacity 2s ease-in;
    -ms-transition: opacity 2s ease-in;
    transition: opacity 2s ease-in;
}
.vignets.load {
    opacity: 1;
}

Animation au scroll à l’aide de plugin js

Comme demandé en commentaire, on peut aussi rendre ce comportement automatique en choisissant les éléments à faire apparaître progressivement au scroll avec des plugin comme ScrollReveal.js, ou encore wow.js qui utilise la librairie animate.css

Un exemple d’utilisation dans cet article

Animation au scroll sans plugin

Et voici une technique pour faire exactement ce que font ces plugins js :

See the Pen
Stagger flex divs, animation on scroll by yuyazz (@yuyazz)
on CodePen.

La technique est longue à mettre en place, mais relativement facile à comprendre. Pour chaque élement (div, classe, ID) auquel on veut ajouter une animation, on va jouer sur sa position et son opacité :

Dans mon exemple, mes box_1 et box_3, dans leur état normal ont une position verticale de -100px.

transform: translateY(-100px);

Grâce à la fonction de scroll, lorsque l’élément en question est atteint, on lui colle une classe « animated » (nommez-la comme vous voulez), et on le ramène à sa position initiale :

transform: translateY(0px);

Pareil pour l’opacité. On passe de 0 dans son état normal à 1 lorsque l’élément est atteint.

Dans la première ligne de notre fonction js :

var $animation_elements = $('.box');

On peut rajouter autant d’élements qu’on veut, classe ou ID, entre guillemets et séparés par des virgules. Comme ça la fonction peut servir pour tous les éléments de la page.

Cette fonction, au contraire des plugins comme scrollReveal.js, agit dès qu’on scroll. C’est à dire que l’effet aura lieu qu’on monte on qu’on descende la page. Tous les plugins essayés arrêtent leurs animation une fois que l’élément est apparu une fois à l’écran.