"/>

Faire apparaître ses div progressivement : fadeIn css ou jquery

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.

6 commentaires sur “Faire apparaître ses div progressivement : fadeIn css ou jquery

  1. Matthieu

    Bonjour,
    Si on veut les faire apparaître progressivement avec le scroll, c’est à dire au défilement le texte ou images apparaît, on le voit sur quelques sites. Comment faire ?
    Merci!

  2. Cathy

    Merci infiniment pour ce code qui m’a beaucoup aidée. Ce site figure désormais en bonne place dans mes signets !

  3. copier coller Auteur de l'article

    j’ai encore beaucoup à faire pour améliorer mes articles (fautes et codes obsolètes!!) Mais merci pour le commentaire!

  4. dusothoit

    Bonjour
    Merci pour ce tuto très clair !
    Petite question : j’ai un menu déroulant vertical avec sous menus.
    La première apparition des div en fadein fonctionne mais lorsque je passe d’un sous-menu à l’autre le fadein n’est pas reloadé et j’ai une transition sèche.
    Une solution ?
    Je vous remercie.
    Laurent

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.