changer l'image de fond avec le défilement

Question

J'ai un tas d'images qui sont censées s'adapter à l'ensemble du navigateur et lorsque vous faites défiler, il passera à l'image suivante et ainsi de suite. Je suis nouveau à cela et je n'ai vraiment aucune idée de ce que je fais. J'ai regardé ceci: Create website background image that changes on a click qui est fondamentalement ce que je veux, mais au lieu de changer sur un clic, il changerait sur un rouleau.

Je ne sais pas si c'est le même concept ... des idées?

Answer 1

Vous pouvez utiliser $ (fenêtre) .scrollTop() pour déterminer la valeur actuelle du défilement et $ (corps) Css ('background-image', '/i/image.jpg') à réellement changer l'image de fond.

$(window).scroll(function() { 
    var image_url = '/i/image1.jpg' 
    if ($(window).scrollTop() > 800) { 
     image_url = '/i/image2.jpg'; 
    } 
    $(body).css('background-image', "url('" + image_url + "')"); 
}); 

Ceci est juste une conception. Vous devez placer toutes vos images dans un "tableau" (comme dans votre exemple) et déterminer l'image à appliquer dynamiquement.