problème effet parallax

Bonjour,

ça fait quelque heure où je m'acharne à chercher comment réaliser un simple effet parallax mais IMPOSSIBLE !!

J'aimerai simplement modifier la position Y des background de mes 3 div... Besoin d'aide s'il vous plait !

Voila le html :

<body>
    <div id="slide1">
        <h2>Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda at, dolore doloribus, earum error illum laboriosam maiores minus modi necessitatibus perspiciatis possimus quas quidem repellat repudiandae sint sunt voluptas.</p>
    </div>
    <div id="slide2">
        <h2>Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda at, dolore doloribus, earum error illum laboriosam maiores minus modi necessitatibus perspiciatis possimus quas quidem repellat repudiandae sint sunt voluptas.</p>
    </div>
    <div id="slide3">
        <h2>Lorem</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda at, dolore doloribus, earum error illum laboriosam maiores minus modi necessitatibus perspiciatis possimus quas quidem repellat repudiandae sint sunt voluptas.</p>
    </div>
</body>

Ici le CSS :

* {
    margin:0;
    padding: 0;
}
#slide1 {
    background: url("http://wallpapercave.com/wp/HFRWZv2.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#slide2 {
    background: url("http://wallpapercave.com/wp/bdrRaFH.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#slide3 {
    background: url("http://more-sky.com/data/out/21/IMG_11475.png");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
body {
    font-family: "American Typewriter";
    color: white;
}
h2 {
    text-align: center;
    font-size: 10vw;
    font-weight: 100;
    padding-top: 5vw;
    padding-bottom: 3vw;
}
p {
    margin-right: 10vw;
    margin-left: 10vw;
    padding-bottom: 10vw;
    font-size: 3vw;
}

Et là le code javascript (qui ne fonctionne pas...) :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/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", 200, 0.1, true);
        $('#slide3').parallax("center", 400, 0.1, true);
    })
</script>

basique - avec 3 background fixed

problème effet parallax

Supprimer

Modérer

Signaler le message aux modérateurs