Discussion :

[Franjuju]

Bonjour à tous,

Je suis actuellement en train de développer un site web et j'ai beaucoup cherché pour trouver comment faire un parallaxe où une image en png suivrait un chemin prédéfini. Je me demande donc si c'est possible tout simplement? Mon problème est que ce chemin n'est pas une ligne droite mais un chemin avec des zig zags et des loopings.

Pouvez-vous donc me dire si ce que je cherche à faire est possible et si oui m'orienter vers les bonnes pistes de réflexions (tuto etc)?

Merci beaucoup !

[kevin254kl]

Salut,

Pouvez-vous donc me dire si ce que je cherche à faire est possible et si oui m'orienter vers les bonnes pistes de réflexions (tuto etc)?

Oui c'est faisable en détectant le scroll il suffit de bouger l'image avec des coordonnées dans un tableau, on utilise du css pour les translations. https://github.com/cyntss/Parallax-img-scroll peut-être ça t'inspirera.

[Franjuju]

Salut Kevin,

Merci pour ton aide, ça m'a bien orienté et je sais ce que je dois chercher à faire plus précisément maintenant. En revanche, je ne trouve pas de code simple en JS pour pouvoir modifier la position de mon img id="section-1-abeille" en fonction du scroll. C'est assez compliqué car je suis en plein apprentissage du JS mais étant donné que j'ai des deadline pour rendre mes projets, c'est dur de prendre le temps de bien apprendre avant de faire ce que je dois faire. Aurais-tu une idée du script qu'il faudrait que j'utilise pour pouvoir définir les position en fonction du scroll?

Merci beaucoup!

[NoSmoking]

Bonjour,
il est clair que tu ne pourras pas réaliser cela en « pur CSS ».

je ne trouve pas de code simple en JS pour pouvoir modifier la position de mon img id="section-1-abeille" en fonction du scroll.

Je doute que tu en trouves un tout fait, il va te falloir mettre la main à la pâte.

Plusieurs écueils semble quand même présents, dont :
Lorsque tu parles de looping il existe 2 positions en Y identiques correspondant à une seule position en X , comment faire la différence entre ces 2 positions en X ?

[Invité]

Bonjour,

En réalité, la difficulté vient essentiellement de la possibilité de mettre les courbes en équation.

...Lorsque tu parles de looping il existe 2 positions en Y identiques correspondant à une seule position en X...

En fait, si on appelle Z la position du scroll (scrolltop), on a ici une fonction (X,Y) (la position de l'image) dépendant de Z.
Et pas juste (Y) dépendant de X (ou inversement).

Par analogie :
On peut imaginer la position d'une gymnaste à la poutre (elle évolue sur une ligne) qui, en fonction du TEMPS, peut sauter vers l'avant, faire des sauts en arrière,...
On a alors sa position (X,Y) qui dépend du facteur TEMPS.