Search code examples
javascriptjqueryparallax

Parallax doesn't move


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?


Solution

  • 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>