I tried today the parallax on my website with the help of one tutorial http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html . But I have a problem with this, my background doesn't move. Here my Html:
<div id="slide1">
<section id="eurocopter">
<div id="conteneur-eurocopter">
<div id="zone-gauche">
<img src="images/img_p_partenaires/eurocopter.png" />
<br />
</div>
<div id="zone-droite">
</div>
</div>
</section>
<section id="eurocopter2">
<div id="conteneur-eurocopter2">
<div id="zone-gauche">
<img src="images/img_p_partenaires/eurocopter.png" />
<br />
</div>
<div id="zone-droite">
</div>
</div>
</section>
<section id="eurocopter3">
<div id="conteneur-eurocopter3">
<div id="zone-gauche">
<img src="images/img_p_partenaires/eurocopter.png" />
<br />
</div>
<div id="zone-droite">
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slide1').parallax("center", 0, 0.1, true);
})
</script>
And my css:
section{
overflow:hidden;
height: 100%;
}
#slide1 {
background: url(http://localhost:8888/odin/images/img_p_partenaires/fond.png) center 0 no-repeat fixed;
}
#eurocopter{
margin: 0 auto;
}
#conteneur-eurocopter{
width:1024px;
height: 600px;
margin: 0 auto;
}
#eurocopter2{
margin: 0 auto;
}
#conteneur-eurocopter2{
width:1024px;
height: 600px;
margin: 0 auto;
}
#eurocopter3{
margin: 0 auto;
}
#conteneur-eurocopter3{
width:1024px;
height: 600px;
margin: 0 auto;
}
It s like if my script would not exist... I don t know what i have to do?
You need to include the jQuery library BEFORE the jQuery parallax
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>