jQuery

Changer d’image de fond au défilement (parallaxe)

Publié en octobre 2015 3 extraits de code par Rémy Montangé

Fiche écrite en 2015 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.

Des couches de contenu au fond blanc alternent avec des bandes d’image, et l’image de fond se déplace pendant le défilement. Le HTML pose les couches, le CSS les images, et quelques lignes de jQuery décalent la position des fonds selon le défilement.

HTML

<div class="layer">
  <h1>Intro</h1>
  <p>Exemple de changement de fond lorsqu'on scroll</p>
</div>
<div class="bg b1"></div>
<div class="layer">
  <h1>Layer 1</h1>
</div>
<div class="bg b2"></div>
<div class="layer">
  <h1>Layer 2</h1>
</div>
<div class="bg b3"></div>
<div class="layer">
  <h1>Layer 3</h1>
</div>

CSS

body {
  margin:0;
  padding:0;
  font-family: "Arial";
}

h1, p {
  margin:0;
}

p:after {
  display: block;
  content: " \25BC";
  font-size:30px;
}

.layer {
  position:relative;
  width: 100%;
  min-height: 180px;
  background: #fff;
  color:#000;
  font-size:25px;
  text-align:center;
  padding: 30px 0;

  z-index:100;
  box-shadow: 0 0 15px 0 #000;
}

.bg {
  height: 300px;
  width:100%;
}

.b1 { background:url(/images/fond-1.jpg); }
.b2 { background:url(/images/fond-2.jpg); }
.b3 { background:url(/images/fond-2.jpg); }

JavaScript

var ease = 1;

$(function() {
  $(document).scroll(function() {
    var scrolled = $(document).scrollTop();
    $('.bg').css( 'background-position', '0 ' + ( scrolled * ease ) + 'px' );
  });
});

Autres fiches jQuery