ScrollMagic поможет вам легко реагировать на текущую позицию прокрутки и создать анимацию

ScrollMagic поможет вам легко реагировать на текущую позицию прокрутки (скролла). Это идеальная библиотека для вас, если вы хотите, чтобы …

• анимацию на основе положения прокрутки — либо вызвать анимацию или синхронизировать ее с движением скроллбара.
• прикрепить (pin) элемент, начиная с определенной позиции скролла — на неопределенный или лимитированный промежуток скролла (липкие элементы)
• переключать CSS классы элементов на основе позиции скролла.
• легко добавлять параллакс эффекты на ваш сайт.
• создать бесконечно прокручиваемую страницу (ajax загрузка дополнительного контента).
• добавить callbacks на специфичную скролл позицию или при прокрутки через специфичную секцию, передавая параметр прогресса.

Посетите нашу демо-страницу, просмотрите примеры, или прочтите документацию.

Как использовать ScrollMagic

Как заставить работать ScrollMagic

Основой для шаблона ScrollMagic является controller (1), который имеет произвольное число scenes (сцен, 2) присоединенных к нему.

1. Существует один контроллер для каждого scroll контейнера. В большинстве случаях есть только один объект контроллер и scroll контейнером является окно браузера. Но вы также можете использовать DIV элементы для скроллинга и также иметь несколько контейнеров на вашей странице. Контроллер также определят в каком направлении должно идти прокручивание (горизонтальном или вертикальном) и несет ответственность за обновление всех сцен.

2. Сцена определяет, что должно произойти при определенной позиции прокрутки. Это может вызвать анимацию, привязывать элемент, изменить класс элемента или что вы захотите.

Определяем контроллер

Как уже упоминалось выше, в большинстве случаев скролл-контейнером является окно браузера. Чтобы создать ScrollMagic контроллер с настройками по умолчанию мы используем основной класс ScrollMagic.Controller(). Мы создаем новый экземпляр и привязываем его к переменной, таким образом мы можем ссылаться на него позже.

var controller = new ScrollMagic.Controller();

Теперь перейдем к более интересной части.

Определяем сцену

Сцены создаются при помощи класса ScrollMagic.Scene(). ScrollMagic.Scene() определяет, где контроллер должен реагировать и как. Здесь мы определяем переменную с именем scene и создаем новый ScrollMagic.Scene() экземпляр.

var scene = new ScrollMagic.Scene();

Внутри ScrollMagic.Scene мы можем поместить объект со связанными свойствами и значениями, которые доступны в соответствии с документацией.

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

var scene = new ScrollMagic.Scene({
  offset: 100, // start scene after scrolling for 100px
  duration: 400 // pin the element for 400px of scrolling
})

Добавляем сцены контроллеру

Для того чтобы сцены реагировали на скроллинг контейнера мы должны добавить нашу сцену контроллеру, который мы определили в самом начале.

var scene = new ScrollMagic.Scene({
  triggerElement: '#pinned-trigger1', // starting scene, when reaching this element
                                      // начнем сцену, когда достигнем этого элемента
  duration: 400 // pin the element for a total of 400px
                // приклеиваем элемент на 400px скроллинга
})
.setPin('#pinned-element1'); // the element we want to pin
                             // элемент, который мы хотим прикрепить

// Add Scene to ScrollMagic Controller
controller.addScene(scene);

Если вы хотите задействовать несколько сцен одновременно, то их можно передать контроллеру следующим образом:

// Add Scene to ScrollMagic Controller
controller.addScene([
  scene1,
  scene2,
  scene3
]);

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

var scene = new ScrollMagic.Scene({
  triggerElement: '#trigger1'
})
.addTo(controller); // Add Scene to ScrollMagic Controller

var scene2 = new ScrollMagic.Scene({
  triggerElement: '#trigger2'
})
.addTo(controller); // Add Scene to ScrollMagic Controller

В приведенном выше примере мы используем технику под названием цепочка совместно с методом AddTo().

Demo без продолжительности скролла (без прокрутки): анимация срабатывает при достижении триггера (назначенного элемента):
demo

Пример работы scrollmagic с продолжительностью (duration):
demo

Ну и конечно же куда же без анимации на greensock