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;
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:
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:
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
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!
Hello !!Pour ca il y a d’excellent tutos, en jquery il y a beaucoup d’exemples :
http://jsfiddle.net/tcloninger/e5qaD/
http://cssdeck.com/labs/jquery-fade-in-on-scroll
avec le code associé..en espérant t’avoir aidé!!
Merci infiniment pour ce code qui m’a beaucoup aidée. Ce site figure désormais en bonne place dans mes signets !
j’ai encore beaucoup à faire pour améliorer mes articles (fautes et codes obsolètes!!) Mais merci pour le commentaire!
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
Pour un menu? est ce que les bonnes classes ont été ciblées?