Images changeantes lors du scroll down

[jfbeaulieu]

Bonjour,

Je suis à la recherche d'un tutoriel qui pourrait m'aider à réaliser le même effet que sur ce site : https://www.templatemonster.com/demo/59169.html

En fait, quand on scroll le site vers le bas, les images backgrounds des différentes sections sont différentes et fixes. J'aimerais savoir comment on peut réaliser ça. Je me dis que c'est juste une question de CSS mais peut-être qu'il faut aller plus loin que ça.

Merci beaucoup pour votre aide!

--
Jean-Francois Beaulieu

http://www.okwebdesign.ca/

https://www.facebook.com/okwebdesign/

[pmleconte]

Bonjour,

En regardant l'exemple fourni, chaque image affichée en arrière plan correspond à une div avec une classe pointant sur une image différente.

Ainsi, vous avez des classes qui contiennent

.bg1 {
....
background-image: url(/mt-demo/59100/59169/mt-content/uploads/2016/08/mt-0548-home-bg1.jpg);
background-size: cover;
background-position: center center;
​​​​​​background-repeat: no-repeat;
..
}
.bg2 {
...
background-image: url(/mt-demo/59100/59169/mt-content/uploads/2016/08/mt-0548-home-bg2.jpg);
​​​​​​​background-size: cover;
​​​​​​background-position: center center;
​​​​​​​background-repeat: no-repeat
...
}

Puis des enchaînements de div:

<div class="bg1...">
<div> mes articles </div>
</div>
<div class="bg2...">
<div> autre série d'articles </div>
</div>

C'est vrai, l'effet est intéressant.

Pascal

[jfbeaulieu]

Merci beaucoup Pascal, je vais tenter le tout de mon côté et voir si ça fonctionne bien

A bientôt,

--
Jean-François Beaulieu
Web designer chez OKWebDesign
info@okwebdesign.ca

https://www.facebook.com/okwebdesign/

http://www.okwebdesign.ca/