Change images on scroll33

by 2jddfsjad

HTML

<img src="https://picsum.photos/200/300" />

CSS

img {
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
}
body {
    height: 10000px;
}

JavaScript

// Array of images to swap between
var images = [
'http://rahviews.com/wp-content/uploads/2013/03/Hats-for-Cats4.jpg',
'http://rahviews.com/wp-content/uploads/2013/03/Hats-for-Cats5.jpg', 'http://www.rochestercitynewspaper.com/binary/733a/1359731127-cat03_square.jpg',
'http://24.media.tumblr.com/3a00f6b470e454b0c902b2610dd2e915/tumblr_msvnyebkGk1qjev1to1_500.jpg',
'http://stuffpoint.com/cats/image/162900-cats-grumpy-cat.jpg',
'http://rahviews.com/wp-content/uploads/2013/03/Lion-Hat-for-Cats3.jpg',
'http://shechive.files.wordpress.com/2010/05/celebs-with-cats-3.jpg'];

var totalImages = images.length;

var documentHeight = $(document).height();

// Work out how often we should change image (i.e. how far we scroll between changes)
var scrollInterval = Math.floor(400 / totalImages);

$(document).scroll(function () {
    // Which one should we show at this scroll point?
    i = Math.floor($(this).scrollTop() / scrollInterval);
    // Show the corresponding image from the array
    $('img').attr('src', images[i]);
});