change background image with scroll [closed]

Question

I have a bunch of images that are supposed to fit the entire browser and when you scroll, it would change to the next picture and so on. I'm new to this and I really have no idea what I'm doing. I've been looking at this: Create website background image that changes on a click which is basically what I want, but instead of changing on a click, it would be changing on a scroll.

Don't know if it's the same concept... any ideas?

Answer 1

You can use $(window).scrollTop() to determine current scroll amount and $(body).css('background-image', '/i/image.jpg') to actually change the background image.

$(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 + "')");
});

This is just a conception. You should place all your images inside an "array" (like in your example) and determine image to apply dynamically.