Смена изображений при прокрутке
Помогите пожалуйста! Нужен блок div который будет менять фоновое изображение в обе стороны при прокрутке страницы с большой периодичностью чтобы создавался эффект видеою
|
при прокрутке блок div должен быть на одном месте на экране?
фоновое изображение должно меняться из-за прокрутки или с большой периодичностью ? |
Блок должен быть зафиксирован на одном месте. Изображение должно меняться при прокрутке.
|
Просто нужна смена изображений при прокрутке, скажем, через каждых 20px
|
Цитата:
|
Цитата:
|
в общем задача для меня оказалась гораздо сложнее чем изначально думал.
<!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>
|
EmperioAf,
вычислить максимальный скролл страницы - разделить на количество картинок - получили шаг - текущий скрол разделить на шаг - получить целое число - показать картинку под индексом == число - всё |
Цитата:
|
Цитата:
|
Цитата:
Цитата:
|
Спасибо большое. Всё классно :dance: , но смена изображений должна осуществляться в автоматичном режиме, а каждая картинка должна быть жестко привязана к величине px прокрутки станицы. Например: при прокрутке страницы вниз на 20px - картинка №1 сменяется картинкой №2, еще 20px вниз - картинка №2 сменяется картинкой №3 и т.д. При прокрутке страницы вверх - в обратном порядке №3 - №2 - №1. С надеждой... :help:
|
*не в автоматическом режиме
|
смена картинок фона по scroll
Иван Федорович,
<!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>
</head>
<body>
<div class="video"></div>
<script>
window.onload = function() {
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"],
videoElem = document.querySelector('.video'),
scrollHeight = document.documentElement.scrollHeight,
clientHeight = document.documentElement.clientHeight,
maxScroll = Math.max(scrollHeight, clientHeight) - clientHeight,
len = images.length,
step = maxScroll/len;
for (var i=0; i<len; i++) {
var img = new Image();
img.src = images[i]
}
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>
</body>
</html>
|
Еще один момент, при смене картинок происходит блик. От этого можно как-то избавится?
|
Иван Федорович,
вариант...
<!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;
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
}</style>
</head>
<body>
<div class="video"></div>
<script>
window.onload = function() {
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"],
videoElem = document.querySelector('.video'),
scrollHeight = document.documentElement.scrollHeight,
clientHeight = document.documentElement.clientHeight,
maxScroll = Math.max(scrollHeight, clientHeight) - clientHeight,
len = images.length,
step = maxScroll/len,
timer, num = 0;
for (var i=0; i<len; i++) {
var img = new Image();
img.src = images[i]
}
window.onscroll = function(){
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
for (var i=0; i < len; i++) {
if (i * step + step >= scrolled) break
}
if (num == i) return;
num = i;
videoElem.style.opacity = 0;
window.clearTimeout(timer);
timer = window.setTimeout(function() {
videoElem.style.backgroundImage = "url("+images[i]+")";
videoElem.style.opacity = 1;
},300)
}
window.onscroll()
}
</script>
</body>
</html>
|
Помогите пожалуйста. Нужен тот же скрипт по смене картинок, только без эффекта перехода. Картинки должны меняться незаметно, моментально. Возможно нужна предзагрузка изображений. Помогите.
|
Цитата:
|
Нужна просто моментальная смена картинок при прокрутке (без блика). Как убрать блик. Помогите.
|
Иван Федорович,
в каком браузере блик? |
Во всех. Может я ошибаюсь, но мне кажется это связано с большим количеством картинок.
|
Картинок штук 20. При открытии сайта и при первых прокрутках, блик есть, спустя какое-то время блик при прокрутке исчезает.
|
Помогите пожалуйста.
|
Иван Федорович,
сделайте предзагрузку изображений (в моём коде она есть строки 37 - 40 пост 14) |
Чем заменить строки 37 - 40. Просьба.
|
Иван Федорович,
а зачем? может только перенести до window.onload |
На 31 строку?
|
Подскажите пожалуйста куда вставить 37-40 строку.
|
Иван Федорович,
танец с бубнами ... незнаю поможет ли он вам.
<!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>
|
Отдельно всё работает. Спасибо. Когда вставляю в код сайта снова появляется блик.
|
Иван Федорович,
смотрите ваше css |
| Часовой пояс GMT +3, время: 19:11. |