Переместите фоновое изображение вдоль пути при прокрутке

Это мой первый пост, и я извиняюсь, если не совсем правильно выразился.

По сути, я пытаюсь добиться того же или похожего эффекта, который был блестяще использован на веб-сайте фильма Red Bull Art of Flight:

http://artofflightmovie.com/

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

Я могу сделать основное, переместить фон из анимации a в b, но я не знаю, что делать, когда я хочу перейти от b к c, c к d и т. д. и т. д.

Я пробовал использовать в открытом доступе:

$('.bg').scroll(function(){
   var x = $(this).scrollTop();
   $(this).css('background-position','0% '+parseInt(-x/10)+'px');
});

Это позволяет мне установить изменение положения фона при прокрутке пользователем, но я не уверен, как тогда установить следующую анимацию. Моей первоначальной мыслью было использовать else if, но это не увенчалось успехом.

В примере с artofflightmovie.com задается массив значений фоновой позиции в пикселях, которые затем считываются как временная шкала.

Я согласен с тем, что я хочу, чтобы CSS был, однако мои знания jQuery не на том уровне, чтобы я мог преодолеть проблемы, с которыми я сталкиваюсь.

Я также взял исходный код страницы Art Of Flight и попытался создать упрощенную версию, но опять же без особого успеха.

Любая помощь, будем признательны


animation jquery background parallax
person toffeejay    schedule 23.02.2012    source источник
comment
Что вы пробовали? Почему ты застрял? Какой у вас код? Вопросы вопросы.   -  person Tim Rogers    schedule 23.02.2012
comment
возможный дубликат http://stackoverflow.com/questions/8923136/how-did-they-do-those-effects-in-http-artofflightmovie-com   -  person Tim Rogers    schedule 23.02.2012
comment
Насколько вы уверены, что это фоновое изображение, а не несколько абсолютно позиционированных элементов, включая одно очень большое изображение? Кажется, вы можете сделать это с помощью массива пар x, y, к которому нужно двигаться. Как только место назначения достигнуто, пара x,y перемещается в конец массива, и вы переходите к следующему. Наверное, в теории проще, чем в применении.   -  person buck54321    schedule 28.02.2012

Ответы (1)


arrow_upward
2
arrow_downward

Спасибо за введение, ребята.

На самом деле я нашел то, что искал здесь: http://joelb.me/scrollpath/

Отличный плагин jQuery, который использует элемент холста для отображения пути, а jQuery управляет прокруткой вдоль него. События/функции также могут запускаться в любой точке пути.

person toffeejay    schedule 01.03.2012