в общем задача для меня оказалась гораздо сложнее чем изначально думал.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Спойлеры</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.container{
position: relative;
width: 1000px;
height: 3000px;
border: 1px solid red;
}
.video {
position: fixed;
left: 100px;
top: 10px;
width: 400px;
height: 250px;
border: 1px solid green;
background-image: url("http://360tv.ru/binfiles/images/20150424/ba10f44c.jpg");
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="video"></div>
</div>
<input type="hidden" value="0">
<script>
var images = ["http://360tv.ru/binfiles/images/20150424/ba10f44c.jpg","http://www.wallsbox.ru/images/original/dozhd-[1680x1050]-[3877171].jpg", "http://moimiri.ru/wp-content/gallery/2013year/2013_Sirost_90x80.jpg", "http://st.magazin-almaz-servis.ru/12/1531/460/syrost-v-kvartire-kak-izbavitsya-foto-2.jpg", "http://cs7002.vk.me/c7007/v7007062/8820/Snd9Gm9pv5k.jpg"];
window.onscroll = function(){
var videoElem = document.querySelector('.video');
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
var scrolledBefore = document.querySelector('input[type="hidden"]').value;
document.querySelector('input[type="hidden"]').value = scrolled;
var scrolledResult = scrolled - scrolledBefore;
if (scrolledResult<0){
var timeout = 200;
for(var i = 4; i>=0; i--){
setTimeout(
(function(n){
return function(){
videoElem.style.backgroundImage = "url("+images[n]+")";
}
})(i)
,timeout
);
timeout += 200;
};
}
if (scrolledResult>0){
timeout = 200;
for(var i = 0; i < 5 ; i++){
setTimeout(
(function(n){
return function(){
videoElem.style.backgroundImage = "url("+images[n]+")";
}
})(i)
,timeout
);
timeout += 200;
};
}
}
</script>
</body>
</html>