Discussion :

[Boris90]

Bonjour à tous,

Je rencontre un problème dans l'utilisation de ScrollMagic pour faire un défilement parallaxe : Lors du défilement, les images de fond saccadent au lieu de défiler de façon fluide. Le site en question est celui-ci : https://camilledevillers.fr/site.html

J'ai noté le problème sur tous les navigateurs que j'ai testé (Chrome, Opera, Firefox, Safari). J'ai également constaté qu'avec un PC puissant, cela le faisait moins que sur mon portable en i3 (mais quand même un peu).

De quoi peut venir le problème ? Les images trop "lourdes" pour ScrollMagic qui a du mal à faire les calculs ? ScrollMagic lui-même qui n'est pas assez optimisé ? (Pourtant, j'ai vu des sites web qui fonctionnent très bien avec...)

Bref, je n'arrive pas à trouver la raison de ces saccades, donc merci par avance pour votre aide !

[NoSmoking]

Bonjour,

De quoi peut venir le problème ? Les images trop "lourdes" ...

la moindre des choses est de travailler avec des images de taille proche du besoin.

Pour ton image de fond, fond-carrousel.jpg, je trouve la taille un peu excessive, info -> 6493px × 3018px, ou encore une autre avec info -> 3000px × 3000px (redimensionné à 365px × 365px), je commencerais par là.

[Boris90]

Effectivement, oubli de ma part sur ces deux images.
Je viens de corriger. Mais ça ne suffit malheureusement pas...

Je vérifie les autres images au cas où...

[Boris90]

Bonjour,

Pas d'autre suggestion ? De mon côté, j'ai vérifié les autres images, et toutes ont la taille mini nécessaire...
J'avoue que c'est assez "ch****" comme problème... Et je n'arrive pas à trouver la raison...
Pourtant, j'ai vu plus d'un site avec pas mal d'images et sur lesquels le défilement est totalement fluide...

C'est vraiment bizarre...

[NoSmoking]

Visiblement tu utilises mal le plugin, on peut observer, par exemple, que ton élément <div class="parallaxParentImage"> change de background-image à chaque scroll.
Regarde peut-être du côté de ta structure HTML.

[Boris90]

Bonjour,

Merci pour la réponse.
Par contre, j'ai revérifié, pas d'erreur. Ça n'est pas le background-image qui change, mais le transform (ce qui fait le défilement parallaxe, quoi). Et c'est le script qui gère ça (Je ne code rien à ce niveau)...
Ou alors je n'ai pas vu de quel parallaxParentImage tu parles (il y en a plusieurs au total).