Déplacer image au scroll de la page

Bonjour tout le monde !



Je voudrais réaliser une petite animation sympathique pour mon site web ; je vous explique :

Je voudrais pouvoir animé deux images lorsque l'utilisateur scroll simplement sur la page.

En gros arriver au milieu d'une page sur mon site, on trouvera un bloc avec à gauche et à droite deux images avec du texte au milieu.

Je voudrais que lorsque l'utilisateur continu à scroller, les images qui étaient à droite et à gauche se retrouvent au milieu avec du texte à droite et du texte à gauche.

J'accompagne mes explications d'une image afin d'etre plus explicite :)

et voici un liens sur lequel une animation similaire est installée, mais je ne suis pas arrivé à comprendre comment ils ont fait (regardez le logo en premiere page qui s'en va à droite dès qu'on scroll :) :

http://muse.eamejia.com/kazzabe/

http://sdz-upload.s3.amazonaws.com/p...plication6.jpg

A la base je pensais faire ça en CSS, mais plus j'avance plus j'ai l'impression que java est nécessaire, qu'en pensez vous ?

Quelle solution me préconisez-vous?

D'avance merci :)

et à très vite j'espere!!!

Citation:

---

Envoyé par aztix

.. mais plus j'avance plus j'ai l'impression que java est nécessaire, qu'en pensez vous ?

---

Qu'il s'agit de javascript.

Citation:

---

Envoyé par rodolphebrd

Qu'il s'agit de javascript.

---

:mouarf::mouarf::mouarf:

Mise à part cette bonne boutade j'ai mis du temps à comprendre.

En gros tu as pas mal de façon de faire ! Effectivement le code à utiliser est du javacscript (ou jQuery)

Je vais essayer de t'expliquer le process :

tu dois déterminer qu'à une position a de scroll ton image est à une position b

si le scroll change, la position de ton image change aussi.

tu peux construire ça comme ça en jQuery :

Code:

---

1 2 3 4 5 6 7 8

$document.scroll(function() { if ($document.scrollTop() == 0) { $('.class_de_mon_image').addClass('pos1'); } else if ($document.scrollTop() == 200) { $('.class_de_mon_image').addClass('pos2'); } });

---

et en css tu définis tes deux class avec une position différente.

Il y a des façon beaucoup plus propre de faire mais l'idée est là :)