Diaporama parallax latéral

La version regaloeb du scrollLateral

Scroll horizontal sur des blocs composés de plusieurs images, plusieurs blocs de texte, plusieurs tout ce qu'on veut !
Ici, avec hauteur de la fenêtre sans marge.

Voilà

Le constructeur vanilla-diaporama-lateral.js

s'occupe de tout pour vous.

Il faut juste :
Déclarer les modules au DOMload (ou plus simplement en bas de page avant la fermeture du body, une fois que tous les éléments HTML sont en place) :
var diaporamaWiz = document.querySelectorAll('.js-scrollLateral');
for(var i=0; i<diaporamaWiz.length; i++){
new DiaporamaLateral( diaporamaWiz[i]);
}
Respecter une structure HTML simple :
<div class="scrollLateral js-scrollLateral" data-reverse="1 ou 0" data-margin="NUM"><div class="scrollLateral-content">
Les enfants de scrollLateral-content qui ont la classe scrollLateral-resizable prendront la hauteur de la fenêtre (ne pas oublier les data-width et data-height qui permettent de respecter le rapport hauteur/largeur).
data-margins indique les marges en haut et en bas du slider.
data-reverse indique si on veut aller de droite à gauche.

Récupérer quelques styles :
.scrollLateral, .scrollLateral-content, .fixed et .scrollLateral-resizable en particulier.

Et le tour est joué !

Avec un iphone, les images présentent un petit bug d'affichage : parfois seule la partie dans le viewport est visible pendant le scroll avant de finalement s'afficher en entier... Si la cible utilise majoritairement ce mobile de m... qui ne fait rien comme les autres, il faudra envisager une alternative.

Avec background fullscreen

Chaque élément avec la classe "js-window-size" prend la taille de la fenêtre:
if (plugin.el.querySelector('.js-window-size')) {
plugin.el.querySelectorAll('.js-window-size').forEach(function(elt){
elt.style.width = windowWidth + 'px';
elt.style.height = windowHeight + 'px';
});
}
Evidemment, la background est en cover et positionné à 50% 50%.

Parallax pour éléments internes

On peut manipuler les éléments avec la classe js-lateral-parallaxed en fonction de la position dans le scroll latéral.

Même principe et data-attr que le fantastique plugin regal-parallax-vanilla.j.

D'ailleurs, il est bien d'utiliser aussi ce plugin de façon à ce que les éléments du premier slide se déplacent avec le scroll vertical (doubler les classes js-lateral-parallaxed et js-regaloeb-parallax et déclarer les regaloebParallax au domready).

Et voilà !

Merci regaloeb.com.

Et voilà !

Merci regaloeb.com.

Ça marche aussi

En mode reverse

C'est tout pour l'instant.