11540 sujets

JavaScript, DOM et API Web HTML5

Pb d'effet parallaxe

Voici une question que j'ai posté récemment, mais je crois m'être trompé d'endroit où l'envoyer, donc je retente ma chance ici (pardon à l'équipe de modération ...)

Bonjour à ceux qui lirons ce message et merci d'avance pour les réponses ...

voila mon soucis : je suis tombé sur le tutoriel expliquant comment créer un effet de parallaxe,
je trouve ça tellement stylé que je me dis qu'il faut que je maitrise cette technique,.
J'ai donc recréer un fichier (pour m'entrainer) avec exactement le même code que dans la démo ... en fait, je ne change que les images.
Le résultat est que j'obtiens bien l'effet de découvrement / recouvrement, par contre je n'obtiens pas le déplacement en vertical des images de fond.
Question : sachant que j'insère bien jquery et que javascript est bien activé sur mon navigateur, pourquoi est-ce que je n'obtiens pas le résultat recherché ?

si qqun (ou qqune) pouvais m'eclairer, ça serait cool ... Smiley cligne
<!doctype html>
<html lang="fr">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Effet parallaxe : étape 3/3</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
color:#fff;
font: normal 90% "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}
h2 {
font-size: 2em;
font-weight:bold;
color: #b7db44;
}
#slide1, #slide2, #slide3 {
height: 1000px;
padding-top:100px;
}
#slide1 {
background:url(image1.jpg) center 0 no-repeat fixed;
}
#slide2 {
background: url(image2.jpg) center 0 no-repeat fixed;
}
#slide3 {
background: url(image3.jpg) center 0 no-repeat fixed;
}
.slide_inside {
width: 980px;
margin: 0 auto;
}
</style>
</head>

<body>

<div id="slide1">
<div class="slide_inside">
<p>Lorem ipsum ...</p>
</div>
</div>

<div id="slide2">
<div class="slide_inside">
<p>Lorem ipsum ...</p>
</div>
</div>

<div id="slide3">
<div class="slide_inside">
<p>Lorem ipsum ...</p>
</div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery.parallax-1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slide1').parallax("center", 0, 0.1, true);
$('#slide2').parallax("center", 900, 0.1, true);
$('#slide3').parallax("center", 2900, 0.1, true);
})
</script>

</body>
</html>
Voici le code (le même que le tutoriel ...)

<!doctype html>
<html lang="fr">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Effet parallaxe : étape 3/3</title>
		<style type="text/css">
			body {
			margin: 0;
			padding: 0;
			color:#fff;
			font: normal 90% "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
			}
			#slide1, #slide2, #slide3 {
			height: 1000px;
			padding-top:100px;
			}
			#slide1 {
			background:url(image1.jpg) center 0 no-repeat fixed;	
			}
			#slide2 {
			background: url(image2.jpg) center 0 no-repeat fixed;
			}
			#slide3 {
			background: url(image3.jpg) center 0 no-repeat fixed;
			}
			.slide_inside {
			width: 980px;
			margin: 0 auto;
			}
	       
	</head>

	<body>
	
	<div id="slide1">
		<div class="slide_inside">					
		   <p>Lorem ipsum ...</p>
                </div> 
	</div> 
	
	<div id="slide2">
		<div class="slide_inside">
		  <p>Lorem ipsum ...</p>
		</div>     	
	</div> 
	
	<div id="slide3">
		<div class="slide_inside">			
		   <p>Lorem ipsum ...</p>
		</div>    
	</div> 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
	<script type="text/javascript" src="script/jquery.parallax-1.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		$('#slide1').parallax("center", 0, 0.1, true);
		$('#slide2').parallax("center", 900, 0.1, true);
		$('#slide3').parallax("center", 2900, 0.1, true);
		})
	</script>


</body>
</html>
Bonjour,

Je rencontre le même soucis que toi, à ceci prêt que j'utilise d'autres librairies javascript en parallèle:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.parallax-1.1.3.js " type="text/javascript"></script>
<script src="js/jquery.tools.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script>


Lorsque je scroll, les valeurs de l'attribut style du bloc parent sur lequel est appliqué mon background ne changent pas contrairement au site demo du tutoriel.


<div id="slide1" style="background-position: 50% 0px; ">
      <div class="slide_inside">
      </div>
</div>


La console de l'inspecteur d'élément ne m'indique pas d'erreurs et malgré l'utilisation d'un jQuery.noConflict(); je soupçonne un conflit javascript avec jquery.tools.min.js.

Qu'en pensez-vous?

Merci d'avance de vos réponses Smiley smile
J'ai eu le même problème avec la version 1.1.3 du plugin. En enlevant le paramètre " adjuster" ça marche.
Sujet clos
Aller à