Иван Федорович,
танец с бубнами ... незнаю поможет ли он вам.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video</title>
<style>
body{
height: 3000px;
}
.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;
background-repeat: no-repeat;
}
</style>
<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"],
len = images.length;
for (var i=0; i<len; i++) {
var img = new Image();
img.src = images[i]
} ;
window.onload = function() {
var videoElem = document.querySelector('.video'),
scrollHeight = document.documentElement.scrollHeight,
clientHeight = document.documentElement.clientHeight,
maxScroll = Math.max(scrollHeight, clientHeight) - clientHeight,
step = maxScroll/len;
window.onscroll = function(){
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
for (var i=0; i < len; i++) {
if (i * step + step >= scrolled) break
}
videoElem.style.backgroundImage = "url("+images[i]+")";
}
}
</script>
</head>
<body>
<div class="video"></div>
</body>
</html>
|