[Résolu]Problème avec jquery parallax

Bonjour,

J'ai un petit problème avec l'effet jquery parallax. J'ai 3 élément que je souhaite coller au bas de ma page web et animer avec l'effet parallax. Pas de soucis pour les coller en bas de page par contre l'effet de parallax ne fonctionne que sur l'axe des x et non sur l'axe des y. Or j'aimerais que mon 2ème élément bouge sur l'axe des y. Comment Faire ? J'ai essayé pleins de trucs.

Voici un bout de mon html :

<script type="text/javascript">
		jQuery(document).ready(function()
		{
			$('#parallax .parallax-layer')
				.parallax({}, {xparallax: '75px'}, {xparallax: '50px'}, {xparallax: '35px'}, {xparallax: '40px'});
		});
		
		$(function() {
		 
		 $('#navigation a').stop().animate({'marginLeft':'-218px'},1000);
		 
		 $('#navigation > li').hover(
		  function () {
		   $('a',$(this)).stop().animate({'marginLeft':'-2px'},200);
		  },
		  function () {
		   $('a',$(this)).stop().animate({'marginLeft':'-218px'},200);
		  }
		 );
		});
		
	</script>

<div id="parallax" class="clear">
		<div class="parallax-layer" style="margin-bottom: -50px;">
			<img src="img/boite-home.png" style="width:580px; height:543px;"/>
		</div>
		
		<div class="parallax-layer" style="width: 1070px; height: 470px;">
			<div id="legendes">
				<p>son immersif<br> à stéréophonie élargie</p><p>multi amplification</p><p>carte son mac et pc<br>sans paramétrage</p><p>sound system tout en un</p>
			</div>
		</div>
		<div class="parallax-layer" style="width: 1550px; margin-bottom: -50px;">
			<img src="img/hand-home.png" style="width:322px; height:455px;"/>
		</div>
		<div class="parallax-layer" style="margin-bottom: -50px;">
			<img src="img/ombre-boite.png" style="width:441px; height:422px;"/>
		</div>
	</div>

et le css qui va avec :

/* PARALLAX */
#parallax{
	width: 1280px;
	height: auto;
}

.parallax-viewport {
    position: relative;     /* relative, absolute, fixed */
    overflow: hidden;
}
.parallax-layer {
    position: absolute;
	bottom: 0;
	left: 0;
}
#legendes{
	background: url('../img/legendes.png') no-repeat top right;
	width:255px; 
	height:354px;	
	padding-top: 46px;
	position: relative;
	z-index: 2;
	
}
.parallax-layer p{
	display: block;
	width: 145px;
	font-family: "big noodle titling", Trebuchet MS, Helvetica;
	font-size: 18px;
	color: #202020;
	text-align: right;
	float: left;
	top: 0;
	line-height: 21px;
	margin-top: 17px;
	margin-bottom: 17px;
	letter-spacing: 0.3px;
}

Merci de votre aide
Modifié par InUnder (26 Sep 2012 - 12:03)

Bonjour,

La doc, c'est bien aussi...

<script type="text/javascript">
		jQuery(document).ready(function()
		{
			$('#parallax .parallax-layer')
				.parallax({}, {xparallax: '75px'}, {xparallax: '50px',[b]yparallax:"Xpx"[/b]}, {xparallax: '35px'}, {xparallax: '40px'});
		});
</script>

Bonjour 6l20,

Merci pour la réponse mais vous pensez bien que j'y avais déjà penser à mettre une valeur de yprallax. Le soucis c'est que yparallax me permet juste de bouger la position initiale de mon objet sur l'axe des y, mais ca ne le fait pas bouger sur cet axe avec l'effet parallax.

Tout ce que j'ai réussi à faire pour le moment c'est de mettre une valeur à la propriété height pour le style de #parallax (au lieu de height:auto;). Sauf que là tout les objets bougent sur l'axe des y et seulement quand mas souris se trouve en haut de page

Re,

Il est possible d'avoir une page de test en ligne ?

C'est un projet de fin d'année que nous ne pouvons pas diffusé sur le net. Je le met en ligne aujourd'hui pour vous montrer et après je l'enlève. Aussi je vous envois le lien par MP

Merci

Hello,

Ce n'est pas la politique de la maison
Le souci que tu rencontres et son éventuelle solution pourront éventuellement servir à d'autres
Il ne devrait pas être très difficile de présenter une page minimaliste reproduisant le problème rencontré, sans pour autant trahir un secret d'état (et disposant de la bibliothèque JavaScript et des différents plu-gin utilisés, les images, le code html).
D'autres que moi pourront alors certainement vous apportez de l'aide, c'est tout bénéfice pour tout le monde.

A tout de suite

Le soucis c'est que le site a été herbergé sur un nom de domaine particulier et que google va référencer ce nom dans son moteur de recherche, lorsqu'on va taper son nom dans google on va voir alsacreation...

InUnder a écrit :
Le soucis c'est que le site a été herbergé sur un nom de domaine particulier et que google va référencer ce nom dans son moteur de recherche, lorsqu'on va taper son nom dans google on va voir alsacreation...

L'un d'entre vous n'a pas un fournisseur d’accès internet qui fournit gentiment un espace de libre expression (page personnelle, etc...) ? Aucun d'entre vous ne connait un hébergeur gratuit ?
Après, il suffit de reproduire les conditions de test sans aucune référence au projet concerné, non ?

ps : J'ai également répondu à ton mp.

Hello,

Pour partager du code, ce n'est pas les solutions qui manquent : jsFiddle, jsBin, Code Pen et j'en passe.

6l20 a écrit :

L'un d'entre vous n'a pas un fournisseur d’accès internet qui fournit gentiment un espace de libre expression (page personnelle, etc...) ? Aucun d'entre vous ne connait un hébergeur gratuit ?
Après, il suffit de reproduire les conditions de test sans aucune référence au projet concerné, non ?

ps : J'ai également répondu à ton mp.

Merci pour ta réponse en mp. Malheureusement c'est le seul hébergeur à notre disposition .

Voici ce à quoi je veux que ca ressemble : http://www.digitalhands.net/

Dans l'exemple, seules les textes et flèches bougent en même temps sur l'axe des y et en même temps sur l'axe des x. Je veux faire pareil avec mon 2eme élément.

En ajoutant à ma proprité #parallax ceci :

height: 900px;
    position: relative;

Là ca fonctionne pour tous les objets. Je veux que ca fonctionne sur l'axe des y que pour le 2eme élément.

Encore merci

J'ai résolu mon problème. Merci encore

InUnder a écrit :
J'ai résolu mon problème. Merci encore

Parfait.
C'eût été sympa de faire partager le résultat de ton labeur
Merci également de rajouter le tag [Résolu] sur le titre de ton sujet

En fait il fallait bien jouer sur les yparallax mais surtout il fallait mettre le conteneur, ici #parallax, en position:relative; et lui donné une valeur pour height. Et ca marche

Merci quand même pour vos réponses

Merci à toi pour le retour d'information