24.07.2015, 16:40
|
 |
Профессор
|
|
Регистрация: 15.01.2015
Сообщений: 622
|
|
Сообщение от рони
|
а что это меняет?  или пусть ТС уточнит
|
ТС написал:
|
Цитата:
|
|
при прокрутке страницы с большой периодичностью чтобы создавался эффект видеою
|
Я ориентировался на то, чтобы в итоге получилось видео. |
|
24.07.2015, 18:48
|
|
Интересующийся
|
|
Регистрация: 22.07.2015
Сообщений: 18
|
|
Спасибо большое. Всё классно  , но смена изображений должна осуществляться в автоматичном режиме, а каждая картинка должна быть жестко привязана к величине px прокрутки станицы. Например: при прокрутке страницы вниз на 20px - картинка №1 сменяется картинкой №2, еще 20px вниз - картинка №2 сменяется картинкой №3 и т.д. При прокрутке страницы вверх - в обратном порядке №3 - №2 - №1. С надеждой...  |
|
24.07.2015, 19:24
|
|
Интересующийся
|
|
Регистрация: 22.07.2015
Сообщений: 18
|
|
|
*не в автоматическом режиме
|
|
24.07.2015, 19:46
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
смена картинок фона по 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>
Последний раз редактировалось рони, 24.07.2015 в 23:02.
|
|
24.07.2015, 22:33
|
|
Интересующийся
|
|
Регистрация: 22.07.2015
Сообщений: 18
|
|
|
Еще один момент, при смене картинок происходит блик. От этого можно как-то избавится?
|
|
24.07.2015, 23:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
Иван Федорович,
вариант...
<!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>
|
|
03.08.2015, 10:40
|
|
Интересующийся
|
|
Регистрация: 22.07.2015
Сообщений: 18
|
|
|
Помогите пожалуйста. Нужен тот же скрипт по смене картинок, только без эффекта перехода. Картинки должны меняться незаметно, моментально. Возможно нужна предзагрузка изображений. Помогите.
|
|
03.08.2015, 12:07
|
|
Профессор
|
|
Регистрация: 15.01.2015
Сообщений: 622
|
|
|
Сообщение от Иван Федорович
|
|
Помогите пожалуйста. Нужен тот же скрипт по смене картинок, только без эффекта перехода. Картинки должны меняться незаметно, моментально. Возможно нужна предзагрузка изображений. Помогите.
|
попробуйте из css кода удалить все строчки в которых есть слово transition. После этого смена картинок должна происходить мгновенно |
|
07.08.2015, 09:29
|
|
Интересующийся
|
|
Регистрация: 22.07.2015
Сообщений: 18
|
|
|
Нужна просто моментальная смена картинок при прокрутке (без блика). Как убрать блик. Помогите.
|
|
07.08.2015, 13:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,075
|
|
|
Иван Федорович,
в каком браузере блик?
|
|
|
|
