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