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:
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.
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 :
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 :
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.
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?
Merci le partage c’est vraiment très utile