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à

C'est ouam

Le plugin scrollLateral-plugin.js

s'occupe de tout pour vous.

Il faut juste :
Déclarer les modules au $(window).load() (il faut attendre que les images soient chargées...) :
$("#lateral-04").scrollLateral({'margins':0, 'reverse': 1});
margins indique les marges en haut et en bas du slider.
reverse indique si on veut aller de droite à gauche.

Ou, mieux, lorsque les images d'un module sont toutes chargées :
$('.js-scrollLateral').each(function(){
    var nbImg = $(this).find('img').length;
    var nbImgLoaded = 0;
    $(this).find('img').on('load', function(){
        nbImgLoaded ++;
        if(nbImgLoaded >= nbImg){
            $(this).parents().find('.loading').addClass('hide');
            $(this).parents().find('.js-scrollLateral').scrollLateral();
        }
    }).each(function() {
        if(this.complete || /*for IE 10-*/ $(this).height() > 0)
        $(this).load();
    });
});


Respecter une structure HTML simple :
<div class="scrollLateral js-scrollLateral"><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).

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 avec un petit javascript supplémentaire à déclarer au domready et en fin de resize:
$('.js-window-size').each(function(){
    $(this).css({'width': $(window).width(), 'height': $(window).height()});
});

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