Effet de défilement Jquery Parallax - Multidirectionnel
Je dois créer une page de parallaxe JQuery multidirectionnelle pour un client. Ils souhaitent essentiellement qu'elle fonctionne de manière similaire à celle-ci - https://victoriabeckham.landrover.com/INT
J'ai les illustrations prêtes et j'ai trouvé de nombreuses bibliothèques jQuery qui me permettent de faire défiler les horiz/vertical - mais je ne suis pas sûr de savoir comment combiner les deux à une coordonnée spécifique. Quelqu'un pourrait-il m'indiquer dans la bonne direction?
Edit: j’avais initialement signé ce billet après avoir examiné Superscrolarama et pensé que tout était résolu - mais après avoir eu du mal à l’appliquer - je ne pense pas que c’est tout à fait le sauveur que je pensais être, j’ai besoin d’une parallaxe horizontale et verticale ainsi atteindre ci-dessus, ce qu'il ne semble pas soutenir - donc d'autres conseils, je serais très reconnaissant pour!
J'ai jeté quelque chose ensemble est jsfiddle pour vous.
Le script initialise d'abord les positions de départ de tous les objets. Ensuite, les gestionnaires sont configurés pour les touches de direction et la molette de la souris. Après cela se trouve la base de l'algorithme dans la fonction parallaxScroll.
Il utilise les flèches ou MOUSEWHEEL pour le défilement.
Il y a des transitions [gauche, droite, haut, bas].
Le HTML et le CSS sont vraiment simples.
Le JS/jQuery qui l’exécute s’explique de lui-même.
C'est un effet intéressant, qui semble être destiné aux sites de type artistique.
Avez-vous examiné des bibliothèques telles que Scrollrama http://johnpolacek.github.com/scrollorama/ ou Curtain http://curtain.victorcoulon.fr/ ?
Je sais que dans votre question, vous dites que vous avez déjà consulté différentes bibliothèques, mais il est difficile de vraiment suggérer comment utiliser les bonnes coordonnées, en fonction de leur fonctionnement.
* edit1
Si vous ne l'avez pas encore vu, l'auteur de scrollorama a également fait superscrollorama, ce qui donne un peu plus de contrôle sur l'animation, par exemple l'animation lorsqu'un élément est épinglé.
vous avez utilisé plugin scrollpath
make path