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;
}

A 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

Mis à jour le Par Copier coller | Dans CSS, jQuery

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!

  3. Cathy

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

  4. 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!

  5. 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.