Javascript-форум - Смена изображений при прокрутке

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Смена изображений при прокрутке (https://javascript.ru/forum/misc/57178-smena-izobrazhenijj-pri-prokrutke.html)

Цитата:

Сообщение от рони (Сообщение 381371)

а что это меняет? :-? или пусть ТС уточнит

ТС написал:

Цитата:

при прокрутке страницы с большой периодичностью чтобы создавался эффект видеою

Я ориентировался на то, чтобы в итоге получилось видео.

Спасибо большое. Всё классно :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>

Помогите пожалуйста. Нужен тот же скрипт по смене картинок, только без эффекта перехода. Картинки должны меняться незаметно, моментально. Возможно нужна предзагрузка изображений. Помогите.

Цитата:

Сообщение от Иван Федорович (Сообщение 382533)

попробуйте из css кода удалить все строчки в которых есть слово transition. После этого смена картинок должна происходить мгновенно

Нужна просто моментальная смена картинок при прокрутке (без блика). Как убрать блик. Помогите.

Иван Федорович,
в каком браузере блик?