Effet PARRALAXE

Sur cet exemple, nous avons 3 div de 500px de hauteur avec une image chacunes

CSS

#slide1, #slide2, #slide3 {
  height: 50px;
  padding-top:100px;
}

#slide1 {
  background:url(http://www.alex-bernardini.fr/informatique/html5/parralax/images/Espace3.jpg) center 0 no-repeat fixed;
}

#slide2 {
  background: url(http://www.alex-bernardini.fr/informatique/html5/parralax/images/Espace2.jpg) center 0 no-repeat fixed;
}

#slide3 {
  background: url(http://www.alex-bernardini.fr/informatique/html5/parralax/images/Espace1.jpg) center 0 no-repeat fixed;
}

Fonctionnement du JS

• xPosition : Position horizontale de l'élément (nomenclature CSS).
• adjuster : La position verticale de départ (en pixels).
• inertia : Vitesse en fonction du scroll. Exemple: 0.1 = 1/10 ème de la vitesse du scroll, 2 = deux fois la vitesse du scroll.
• outerHeight : Détermine si jQuery utilise sa propre fonction outerHeight pour déterminer quand une partie est visible dans le viewport (true ou false).

 

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

Une dernière page de test

Alios autem dicere aiunt multo etiam inhumanius (quem locum breviter paulo ante perstrinxi) praesidii adiumentique causa, non benevolentiae neque caritatis, amicitias esse expetendas; itaque, ut quisque minimum firmitatis haberet minimumque virium, ita amicitias appetere maxime; ex eo fieri ut mulierculae magis amicitiarum praesidia quaerant quam viri et inopes quam opulenti et calamitosi quam ii qui putentur beati.