Comment faire un effet de recouvrement en jQuery
J’ai récemment eu à intégrer un thème Drupal, dont le designer souhaitait un effet de recouvrement lors du passage d’une <div> à l’autre.
L’effet en question est une transition particulière sur une page donnée où on trouve plusieurs <div>, ayant toute la hauteur la fenêtre du navigateur. La première <div>, appelons la div1 ainsi que son contenu sont en position fixe. La <div> suivante, nommons la div2, défile normalement , recouvrant div1, jusqu’au moment où sa limite/bordure supérieure atteint le haut de l’écran . A cet instant, div2, ainsi que son contenu, se mettent en « position:fixed », pour être recouverte par la div suivante, div3 lors de son défilement.
Et ainsi de suite jusqu’à épuisement des div présentes sur la page .
En pratique, ça donne quelque chose comme ça : le mouvement des différents <div> sur la page, ainsi que leur positionnement fixe séquentiel donne un facteur wow à la page . Couplé à un effet parallaxe sur certaines des div, ça peut donner un résultat technique plutôt original .
Comment faire ?
- , lorsque l’utilisateur fait défiler l’écran entre la position 0 (soit le haut de la page) et la position 1 correspondant à la hauteur de la fenêtre du navigateur, la div1 et son contenu se mettent en « position:fixed » .
- Lorsque l’utilisateur fait défiler l’écran entre la position 1 et la position 2, soit deux fois la hauteur de la fenêtre du navigateur web, la div1 revient en « position:relative » et la div2 passe en position fixed.
- Et ainsi de suite jusqu’à épuisement des div présentes sur la page .
Le code correspondant est disponible ci dessous.
[codepen_embed height= »314″ theme_id= »light » slug_hash= »CmvGn » default_tab= »js,result » user= »jhouedanou »]See the Pen Effet carte jquery by Jean Luc Houedanou (@jhouedanou) on CodePen.[/codepen_embed]
Jean-Luc Houédanou est un blogueur spécialisé dans l’innovation et la transformation numérique, avec une expérience en développement web front-end. Après avoir obtenu un Master en gestion du commerce électronique de l’Université de Sherbrooke, il a travaillé sur des projets d’envergure mondiale pour diverses entreprises, startups et organisations internationales. Il est également impliqué dans des projets communautaires et technologiques en Afrique.
Il aide, par le biais de ce blog, les lecteurs à s’adapter aux évolutions rapides de la technologie et des tendances du marché.
En plus de ses articles sur l’innovation et la transformation numérique, Jean-Luc Houédanou écrit également des colonnes d’opinion et donne des conseils sur le bien-être mental. Son objectif est d’aider les lecteurs à se développer personnellement et professionnellement, en leur fournissant des conseils pratiques pour gérer le stress et améliorer leur qualité de vie.