Informatique

Bonjour,

Le titre n'est pas très parlant, je vais essayer de mieux résumer la chose.
Je dois faire un travail de diplôme qui concerne une génération de monde. L'idée est d'avoir 4-5 div (foreground, midground, background, etc) qui représentent des plans d'un monde (p.e. premier plan: arbres; deuxième plan: sol+herbe; troisième plan: ciel).

L'idée c'est de permettre à l'utilisateur de se déplacer dans ce monde horizontalement en scrollant. Pour que ça soit réaliste, j'aimerais que les divs agissent en parallax; bouger comme lorsqu'on est en voiture ou en train:
Premier plan: vitesse V
Deuxième plan: V-1
Troisième plan: V-2
...etc.

Savez-vous donc si il est possible de forcer certaines div à se déplacer plus lentement lorsqu'on scroll ?

Merci d'avance !

Cherche " parallaxe web design " sur google

http://www.webdesign-inspiration.com/web-designs/style/parallax

C'est exactement ça. Parallax.js pour une lib poussée pas forcément facile à prendre en main, ou Stellar.js, plus limitée mais plus facile.
Dans ton cas suivant la complexité que tu veux donner à ton effet tu peux te contenter de stellar, ça peut se gérer avec un simple attribut supplémentaire dans tes divs (de mémoire, data-stellar-background-ration avec 1 la vitesse de référence) et les lignes d'activation dans ton fichier principal js.

J'ai déjà vu les noms de Parallax.js et Stellar.js, mais il me semble que ça ne s'applique qu'à un scroll vertical… Je me trompe ?

Celui-ci est très bien, je l'ai utilisé plusieurs fois avec beaucoup de plaisir : https://github.com/Prinzhorn/skrollr

Je vais essayer ce que vous m'avez donné. Merci en tout cas !