11486 sujets

JavaScript, DOM et API Web HTML5

Scrolling diagonal

Bonjour,

Je souhaiterais obtenir l'effet suivant qui consiste à déplacer diagonalement des div lors d'un scrolling :

http://mocastepandrepeat.tumblr.com/

Je ne comprends pas bien comment cet effet est déclenché sur site (en CSS3 il me semble, mais le code paraît complexe). J'ai également trouvé des solutions JS un peu bancales utilisant la position "fixed" et des "scrollTop".

Bref, je cherche une façon propre de réaliser cet effet, qui devra fonctionner sur mobile (quitte à utiliser IScroll pour IOS).

Merci aux grands esprits de ce site qui pourraient m'orienter !
Merci pour cette réponse _laurent,

Il s'agit en effet d'un parallax. Malheureusement je n'arrive pas à mettre en œuvre la diagonalisation de cet effet. Tous les tutoriels ou les scripts sont paramétrés pour déplacement soit vertical, soit horizontal. De plus ils font souvent référence à la position "fixed", ce que je souhaiterais éviter pour assurer une compatibilité mobile.
Modérateur
Re (désolé pour le délai),


Pour un effet diagonal il suffit juste de faire varier les deux variables (horizontale et diagonale) en même temps (en plus sur l'exemple que tu a donné il n'y a même pas de différence de vitesse entre les plans).

Pour la position fixed -> C'est pas exactement "position:fixed;" qui est utilisé, c'est la propriété "background-attachement:fixed;" (http://www.w3schools.com/cssref/pr_background-attachment.asp) Le support à pas l'air trop crade : http://caniuse.com/#feat=background-img-opts ... à tester.

Par contre pour ce qui est de la "compatibilité mobile" je suis pas sur que ça fasse la paire avec le parallaxe... en tout cas j'ai jamais vu / testé de site parallaxe sur mobile... je vais le faire de ce pas tiens ça m’intéresse !
Modérateur
Effectivement les sites de l'article et même l'exemple en passent pas du tout ! Du coup en cherchant depuis l'iPad je suis tombé sur parallax.js qui affiche une compatibilité mobile et sur l'ipad l'effet est super ! Par contre pour le scroll je sais pas s'il y a une option...
Bonjour _laurent,

J'étais tombé sur les mêmes recherches et c'est vrai que l'effet parallax.js rend bien, mais rien sur le scroll diagonal.

Du coup, je me résous à programmer l'effet en JS directement. Je ferai varier le top et le left en fonction des inputs du touchevent, en dépit de pouvoir capturer le scroll simplement.
Modérateur
Si jamais tu mets un truc en ligne hésites pas à la partager je suis curieux de voir le résultat sur mobile !
Bon courage !
Modifié par _laurent (06 Oct 2014 - 14:08)
Sujet clos
Aller à