Параллакс при прокрутке страницы

Sly - библиотека с большим набором возможностей, в том числе и созданием параллакса при прокрутке страницы. В предыдущей статье мы рассмастривали WOW.js, который позволял разово анимировать элемент при его появлении во время скролла. Sly же позволит задать состояние элемента на каждый момент скролла. Чтобы было понятнее, демо: http://darsa.in/sly/examples/parallax.html

Анимация получается очень плавная за счет использования requestAnimationFrame. При этом библиотека избавляет нас от рутиной работы, предоставляя простой интерфейс для описания анимации. Из зависимостей только jQuery 1.7+.

// Создаем объект Sly в режиме паралакса
var parallax = new Sly(10000, {
    scrollSource: document, // Биндинг к скроллу документа
    scrollBy: 100, // Изменять значение шага на `scrollBy` за одно `mousewheel` событие

    dragSource: document, // Элемент для драг событий
    mouseDragging: 1, // Включить перетаскивание мышкой?
    touchDragging: 1, // Включить перетаскивание на тач-устройствах?
    releaseSwing: 1,  // При оверскролле возвращать все на место?

    scrollBar: '#scrollbar', // Связанный скролл-бар

    speed: 600, // Скорость анимации
    easing: 'easeOutExpo' // Функция анимации
});

function renderFrame(eventName) {
    this.pos.start; // Начальное значение
    this.pos.cur; // Текущая позиция
    this.pos.dest; // Позиция "назначения" во время анимации
    this.pos.end; // Конечное значение
    // ... а теперь делаем тут что хотим с этими значениями
    // Например, можно глянуть демо: http://darsa.in/sly/examples/js/parallax.js
}

// Регистрируем событие на нашу функцию
parallax.on('load move', renderFrame);

// И инициализируем объект
parallax.init();

Как ни странно, это все, что требуется для реализации шаговой анимации по скроллу. Внутри рендер-функции вы уже самостоятельно реализуете нужную вам логику. При этом не нужно использовать анимацию вроде $.animate(), посмотрите на демо исходники, там просто присваиваются новые значения left/top или translation (для нормальных браузеров).

В демо так же используется трюк для ускорения рендера в нормальных браузерах: анимируемым элементам присваивается CSS свойство transform:translateZ(0), оно включает использование GPU при отрисовке элементов, это в разы увеличивает скорость отрисовки страницы, например в хроме.

Некоторые неочевидные фичи:

• Можно прибиндить события на любой элемент, а не только на document
• Для драг-событий предусмотрен overscroll с отрицательными значениями. Попробуйте потянуть мышкой демо в обратную сторону.

Некоторые важные баги:

• В Firefox при окончании скролла может заглючить (на момент написания статьи).
• Лучше не использовать на страницах с динамической высотой (как эта), т.к. плагин сам не обновляет высоту контейнера.