Vanilla = sans bibliothèque jQuery, juste avec du javascript moderne.
Inclure le constructeur vanilla-diaporama-fullscreen.js dans la page.
Déclarer le ou les modules :
À chaque bloc est attribué une grosse image de background (1920x1080px) avec background-position: 50% 50%, background-size: cover et background-attachment: fixed.
La hauteur des blocs est appliquée en javascript grace à la classe "js-height" et à l'attribut data-height-ratio="1.5". Ici, le bloc fait 1,5 fois la hauteur de la fenêtre navigateur.
Un simple scroll fait le reste !
Pour chaque élément auquel on applique la classe "js-regaloeb-parallax", on pourra modifier tous les paramètres de transform (translate3d, scale, rotate, skewX et skewY) et son opacity.
L'attribut data-x="INITIAL#FINAL" indique que le translateX sera modifiée via la propriété translate3d.
L'attribut data-y="INITIAL#FINAL" indique que la translateY sera modifiée via la propriété translate3d.
L'attribut data-scale="INITIAL#FINAL" indique que la scale sera modifiée, INITIAL: scale initiale, FINAL: scale finale.
L'attribut data-rotate="INITIAL#FINAL" indique que la rotation sera modifiée, INITIAL: rotate initiale, FINAL: rotate finale.
L'attribut data-skewX="INITIAL#FINAL" indique que le skewX sera modifiée, INITIAL: skewX initiale, FINAL: skewX finale.
L'attribut data-skewY="INITIAL#FINAL" indique que le skewY sera modifiée, INITIAL: skewY initiale, FINAL: skewY finale.
L'attribut data-o="INITIAL#FINAL" indique que l'opacité sera modifiée.
L'attribut data-end="NUM" indique à quel endroit du viewport l'objet atteint ses valeurs finales : 2 = au milieu, 3 = au 2/3, 1 au scroll 0, etc.. Valeur par défaut: 2 (au milieu).
Lorsque l'élément arrive dans le viewport, la propriété prend la valeur INITIAL
À l'endroit du viewport déterminé par data-end (au milieu par défaut), la propriété prend la valeur FINAL.
Conteneur principale : classe "diaporama-wiz".
Pour chaque bloc : classes "js-height", "bg-fixed" et "slide".
Pour chaque élément interne à parallaxer : classe "js-regaloeb-parallax".
Deux constructeurs et deux fonctions : vanilla-diaporama-fullscreen.js pour l'effet full-screen, background fixed et boutons "info" et "full" + regal-parallax-vanilla.js pour le parallax des éléments internes.
Au chargement du DOM et à la fin du resize de la fenêtre, la fonction slideHeight() est exécutée.
Chaque élément avec la classe "js-height" verra sa hauteur modifiée en fonction de la hauteur de la fenêtre et de l'attribut "data-height-ratio".
Chaque élément avec la classe "js-regaloeb-parallax" verra sa position et/ou son opacité modifiées selon la position du scroll.
On peut cacher les légendes en y appliquant la classe "info-mask"
En rajoutant un élément <div class="info"></div>, les "info-mask" deviennent visibles au survol de ce dernier.
En appliquant la classe "full-mask" aux légendes et en rajoutant un élément <div class="full"></div>, les "full-mask" sont masqués au survol de ce dernier.
Le contenu de chaque slide peut facilement être personnalisé en utilisant les principes de base des CSS et un paramètrage spécifique pour chaque objet.
Merci regaloeb.com