Перемещать положение фонового изображения вдоль контура при прокрутке - PullRequest
Новая
       22

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

2 голосов
/ 23 февраля 2012

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

По сути, я пытаюсь добиться того же или подобного эффекта, который блестяще использовался на сайте фильма 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, но это не удалось.

Пример artofflightmovie.com устанавливает массив измерений px для положения фона, которые затем считываются как временная шкала.

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

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

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

1 Ответ

2 голосов
/ 01 марта 2012

Спасибо за вводимые ребята.

Я действительно нашел то, что мне было здесь нужно: http://joelb.me/scrollpath/

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

...