Discussion :

[aztix]

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/



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

[rodolphebrd]

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

Qu'il s'agit de javascript.

[raydenprod]

Qu'il s'agit de javascript.

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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à