A Unix Mind In A Windows World .

Chroniques tech et pérégrinations digitales. Opinons incluses.

Post Page Advertisement [Top]


 
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 ?

L'idée est de se servir de la propriété scroll de jQuery et des dimensions de la fenêtre. Ainsi on rédige un script qui se lance à chaque que l'utilisateur fait un défilement de fenêtre et atteint un multiple de la hauteur de la fenêtre . Pour schématiser :
  • , 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. Si j'en ai le temps,j'en ferais un plugin jQuery.
Loading ....

Aucun commentaire:

Bottom Ad [Post Page]

| Designed by Colorlib | (Heavily) Modified by Jean Luc Houedanou