Diaporama fullscreen

Diaporama fullscreen Vanilla

Vanilla = sans bibliothèque jQuery, juste avec du javascript moderne.

Javascripts

Inclure le constructeur vanilla-diaporama-fullscreen.js dans la page.
Déclarer le ou les modules :

Il faut aussi déclarer la fonction resizeEnd Vanilla et le polyfill NodeList.forEach, avant d'inclure le constructeur car celui-ci y fait appel.

Enfin, pour rajouter des effets parallax à l'intérieur des slides, il faut inclure le constructeur regal-parallax-vanilla.js. Et déclarer les parallax :

Principe de base

À 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 !

full

Parallax éléments internes

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.

full

Les classes


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".


full

Principes javascript

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.

full

Légendes masquées

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.



A l'inverse


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.

i

Personnalisable

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.

full

Champitop !

Merci regaloeb.com

i