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 !

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.

Les classes

Conteneur principale : classe "diaporama-wiz".
Pour chaque bloc : classes "js-height", "bg-fixed" et "slide".
On peut y ajouter la classe "js-parallaxed", alors le background sera déplacé pendant le scroll.
Pour chaque élément interne à parallaxer : classe "js-regaloeb-parallax".

Principes javascript

Trois petits plugins jQuery : diaporama-fullscreen-plugin.js pour l'effet full-screen, background fixed et boutons "info" et "full" + regaloebParallax-plugin.js pour le parallax des éléments internes + bgParallax-plugin.js pour le parallax des images de fond.

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

Au chargement DOM et au scroll, le plugin regaloebParallax() est exécuté.
Chaque élément avec la classe "js-regaloeb-parallax" verra sa position et/ou son opacité modifiées selon la position du scroll.

Au chargement DOM et au scroll, le plugin bgParallax() est exécuté.
Chaque élément avec la classe "bg-parallaxed" verra son background repositionné selon la position du scroll.

Mobiles

La plupart des mobiles ne comprennent pas le background-fixed (les nazes), alors pas d'effet parallax pour les téléphones portab...

Et de toutes manières, l'écran des téléphones n'est pas assez large pour bien voir l'image de fond, alors on affiche l'image de la slide dans une balise <img>, on y applique la classe "only-mobile" (comme ça ya que les mobiles qui la voient) et pi c'est tout.
Bon, on pourrait aussi appliquer un background différent pour les petits écrans... au choix !

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.

Champitop !

Merci regaloeb.com