11548 sujets

JavaScript, DOM et API Web HTML5

Intégrer effet parallax sur un background

Bonjour à tous,

Sur mon site, qui est sous Wordpress, je voudrais intégrer des effets de défilement vertical en parallax.
Le site actuel est visible ici :
http://www.torondel.net/

Ce que j'aimerais, c'est avoir plusieurs images en background, qui se superposent, et qu'elles défilent à des vitesse différentes. Par contre mon menu à gauche doit rester fixe, et la partie contenu doit défiler de manière "normale".

J'ai fais plusieurs recherches et essais, en vain, c'est pourquoi je viens vous demander conseil...

J'ai bien trouvé le tutorial de Simon-K sur alsacreations, j'ai réussi à l'intégrer à mon theme, mais le résultat ne correspond pas à ce que je cherche comme effet.

Le plus proche que j'ai trouvé, c'est ceci :
http://dev.jonraasch.com/scrolling-parallax/docs
notamment cet exemple : http://dev.jonraasch.com/scrolling-parallax/examples/multi-layered-parallax
Je l'ai intégré sur mon site (sur une URL de test), mais le souci est que les réglages possibles sont assez réduits, je ne peux pas régler les calages x et y des images impactées, par exemple.
Voici ce que ça donne : http://www.atelier36.net/tnetv7/. Là du coup les images impactées par le parallaxe sont mal calées.

Est-ce que quelqu'un aurait des conseils à me donner ? Idéalement j'aimerait trouver un script comme celui-ci dessus, mais qui permettrait des réglages plus fins et précis.

A moins que d'autres solutions soit meilleures ?

bref je suis preneur de tout conseil ! Smiley smile

merci d'avance,
David
Salut,

Pas de script tout fait, mais ça me parait assez gérable en JS.


<body>
  <div class="bg1"></div>
  <div class="bg2"></div>
  <div class="bg3"></div>
  <div class="conteneur">Ici le contenu du site</div>
</body>


Les bg en absolute avec des z-index croissants.

Ensuite, suffis de créer un objet qui gére le comportement lors du scroll, avec des multiplicateurs et de l'instancier pour chaque bg avec une multiplicateur différent.

Ps: tu remarquera le petit bug sur l'exemple lorsque tu arrive en bas de la barre de scroll Smiley cligne
Modifié par JJK801 (02 Jul 2012 - 13:46)
Bon, j'ai essayé de faire ça, mais sans succès... je suis pas développeur à la base, juste un graphiste qui bidouille, oui, je sais, c'est haissable... Smiley lol

Je continue de chercher....
Sujet clos
Aller à