Как на сайте риализовать изменение background при скроллинке страницы?

Question

[Сергей]

Хочу сделать в шапке изменение картинок при прокрутке страницы, у меня есть например 100 картинок при скролинге они они начинают меняться и получается эффектвидео, когда заканчиваются все 100 картинок страница начинается прокручиваться дальше. Не обязательно чтобы картинки были backgriund, может даже есть готовые библиотеки?

Comments

[Сергей]

я пересмотрел плагины скролл паралаксов, ничего интересноге не нашел, а может есть?

Answer 1

[Юрий Лобанов]

upd2:
codepen.io/iiil/pen/eaEnp
Примерно вот так, картинки кинете в одну папку, назовите как в примере: back1, back2 и т.д.
Используется jquery плагин mousewheel
При прокрутке он определяет дельту, и если она меньше нуля (крутим вниз), то присваивает бэкграунду следующую картинку, в красный блок я вывел это число. Если воспользуетесь просмотром кода, то увидите, как меняется свойство background-image. После того, как картинки заканчиваются - начинается скролл как обычно. Если надо реализовывать и прямую, и обратную прокрутку - то допишите сами или жду коммерческого предложения, так как идею я наглядно показал, думаю что сами допилите. Как я уже говорил - картинки надо предзагрузить. Иначе путь-то будет меняться, но загружаться картинки не будут успевать. И даже в этом случае, учитывая объем картинок, боюсь будет тупить.

upd:
1. Для того, чтобы картинки успевали меняться - Вам их необходимо предзагрузить. С сотней картинок определенно будут проблемы.
2. Не совсем понятно, сначала при скролле должны меняться только картинки, а страница оставаться статичной? И только после того, как картинки закончатся - начинаться скролл? По крайней мере именно так я понял из вопроса.
3. Какой размер и характер картинок? Может быть подойдет спрайтовая анимация?

Совсем другое дело

Все Ваши ответы уйдут в пустоту. Призываю не отвечать данному товарищу, пока он не отреагирует на предыдущие вопросы.
В большинстве вопросов есть правильные ответы. На месте модераторов я бы за такое банил.

Comments

[Сергей]

я даже не знал, спасибо за совет, теперь буду помечать

[Юрий Лобанов]

@serzhei я изменил ответ. Прочите, ответьте на вопросы.

[Сергей]

1. На сайте будт прелоадер, пока делаю локально
2. Все правильно
3. шапка сайта будет подстраиваться под разрешение экрана (растянута на весь экран), картинки будут 1920*1080. Спрайтовая анимация не подойдет.

[Юрий Лобанов]

@serzhei и что, реально сто картинок хотите сделать? А как быстро должны прокручиваться? В случае обратного прокручивания колеса - должны прокручиваться в обратном направлении?

[Юрий Лобанов]

@serzhei смотрите upd2.

[Сергей]

спасибо, надо испробовать, я тоже один способ нашел, подключил библиотеку skrollr.js (наподобии scrollorama.js) при прокрутке менял background-image но както затупливало, потом создал много дивов и поочереди делал display: block; но все равно висло, потом сделал перед каждым display: block; предыдущий display: none; делать и тут пошло маслице, плохо только в этом способе то что под этим фиксированным блоком надо большой margin-bottom делать)

[Юрий Лобанов]

@serzhei а Вы уверены, что это нужно? Ну то есть задача по своему интересна, я бы попробовал сделать, но что-то вроде мультика, небольшой картинки, спрайтом или отдельно - не суть. Но именно бэкграунд...
Что Вы читали о юзабилити? Вот я, окажись на таком сайте, ради интереса докручу до конца. И то при втором заходе буду искать кнопку отмены этой ерунды. А кто-то убежит сразу. Шутки со скроллом вообще плохи, люди, когда крутят колесо, ждут, что страница поедет вниз. Когда страница при этом крутится вправо (горизонтальные сайты) - это еще можно назвать акцентом, интересной фишкой. Но когда не происходит ничего - я точно уйду с сайта.

[Сергей]

получилось неплохо как доделаю могу показать, у меня получилось 56 картинок и они меняются каждые 100px прокрутки в общем секунды 3 скролинга, кстати это лендинг

[Юрий Лобанов]

@serzhei Вы же говорили, что страница не должна прокручиваться, пока не закончатся картинки.
Потом присылайте конечно, интересно посмотреть как работать будет.

[Сергей]

@iiil такой вот скролинг получился, до этого был плавный, фотки поставил одну через 3 чтобы сайт быстрее грузился http://фото-видео-свадьбы.рф/

[Юрий Лобанов]

@serzhei вполне достаточно. Плавность в данном случае даже может сделает хуже. Запомню себе такой способ, смотрится очень симпатично!
Сначала отнесся скептически к идее, сейчас вижу, что получилось круто.

Answer 2

[GM2mars]

Для решений со скролом нужно делать проверку на шаг, при котором будет меняться картинка. Так как событие скрол срабатывает при сдвиге на 1px.
То есть к примеру мы хотим менять картинку на каждые 100px скрола вниз:

var step=100;
$(window).scroll(function() {
    var index = $(this).scrollTop();
    if (index>step) {
      step+=100; //можно и step=index+100 (нужно смотреть что будет лучше)
      (меняем картинку, алгоритм можно любой придумать)
    }
  });

Comments

[Сергей]

так изначально сначала страница должна на одном месте стоять а отом когда все картинки закончатся прокручиваться дальше

[GM2mars]

@serzhei вон оно как, я не понял изначального вопроса. Как варианты, это сделать верхний слой с картинками как position: fixed или попробовать по скроллу возвращать event.preventDefault(); чтоб не скролил, тогда нужно провеку шага придумать другую.

Answer 3

[Андрей Голуменов]

Что-то типа того вам нужно

$(window).scroll(function(){
     // тут всякие вычисления высоты и смена бекграунда в зависимости от вычислений
     $('#target').css('background','url(images/background.jpg)');
});