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]
