JSFiddle - React, Tailwind, and code Playground
HTML
<body id="body">
<div id="test"></div>
</body>
CSS
#body {
background-color:#000;
background-attachment:fixed;
background-repeat:no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#test {
height:1000px;
}
JavaScript
$(document).ready(function () {
switchImage();
});
$(window).scroll(function () {
switchImage();
});
var pics = []; // CREATE PICS ARRAY
//PRELOAD FUNCTION TO SET UP PICS ARRAY IN MEMORY USING IMAGE OBJECT
function preload() {
for (i = 0; i < arguments.length; i++) {
pics[i] = new Image();
pics[i].src = arguments[i];
//alert("preload " + arguments[i]);
}
}
preload(
'http://ingodwetrustthemovie.com/bgImage/100.jpg',
'http://ingodwetrustthemovie.com/bgImage/101.jpg',
'http://ingodwetrustthemovie.com/bgImage/102.jpg',
'http://ingodwetrustthemovie.com/bgImage/103.jpg',
'http://ingodwetrustthemovie.com/bgImage/104.jpg',
'http://ingodwetrustthemovie.com/bgImage/105.jpg',
'http://ingodwetrustthemovie.com/bgImage/106.jpg',
'http://ingodwetrustthemovie.com/bgImage/107.jpg',
'http://ingodwetrustthemovie.com/bgImage/108.jpg',
'http://ingodwetrustthemovie.com/bgImage/109.jpg',
'http://ingodwetrustthemovie.com/bgImage/110.jpg',
'http://ingodwetrustthemovie.com/bgImage/111.jpg',
'http://ingodwetrustthemovie.com/bgImage/112.jpg',
'http://ingodwetrustthemovie.com/bgImage/113.jpg'
);
function switchImage() {
var s = $(window).scrollTop()/10;
var index = Math.floor(s / 5);
$('body').css('background-image', 'url(' + pics[index].src + ')');
}