По мере прокрутки страницы плагин ScrollMe может масштабировать, поворачивать, трансформировать и изменять прозрачность элементов на странице. Он легко настраивается и не требует дополнительных строк javascript.

Установка:

Подключаем библиотеку jQuery и плагин ScrollMe:

HTML код выглядет следующим образом:

Класс scrollme определяет контейнер для анимированных элементов. Прогресс анимации основан на прокрутке этого элемента.

Класс animateme определяет анимированный элемент.

Если это необходимо, оба эти класса могут быть применены к одному и тому же элементу.

Настройки:

Параметры добавляются как атрибуты элементов scrollme

  • data-when

    Определяет границы прокрутки, когда начинаются и заканчиваются анимация.

    enter — начиная с момента, когда верхняя часть контейнера входит в окно просмотра и до момента, когда он выходит.

    exit — начиная с момента, когда нижняя часть контейнера входит в окно просмотра и до момента, когда оно выйдет.

    span — начиная с момента, когда верхняя часть контейнера входит в окно просмотра и до момента, когда выйдет его нижняя часть.

  • data-from и data-to

    Задает позицию внутри границ прокрутки, с которых начинается и заканчивается анимация.

    Анимированным свойствам присваивается значение по умолчанию до позиции data-from, а затем переход к значению, определенному в параметрах, по мере продвижения прокрутки к позиции data-to.

    Значения: 0 — 1

  • data-easing

    Устанавливает функцию плавности, применяемую к анимации.

    easeout — начинается быстро, к концу замедляется (используется по умолчанию)

    easein — медленно начинается, к концу ускоряется

    easeinout — начинается и заканчивается медленно

    linear — одинаковая скорость от начала и до конца.

  • data-opacity

    Устанавливает прозрачность анимированного элемента, когда прокрутка приближается к позиции data-to.

    Значения: 0 — 1

  • data-scale, data-scalex, data-scaley и data-scalez

    Определяет масштаб анимированного элемента (необязательно вдоль оси X, Y и Z), когда прокрутка приближается к позиции data-to.

    Значения: коэффициент масштабирования

  • data-rotatex, data-rotatey и data-rotatez

    Определяет угол поворота анимированного элемента вдоль оси X, Y и Z, когда прокрутка приближается к позиции data-to.

    Значения: угол поворота в градусах

  • data-translatex, data-translatey и data-translatez

    Определяет расстояние для перевода анимированного элемента вдоль оси X, Y и Z, когда прокрутка приближается к позиции data-to.

    Значения: расстояние в пикселях

Примеры:

Более подробную информацию о данном плагине и примеры можно найти на сайте разработчика: http://scrollme.nckprsn.com/

Добавить комментарий

Ваш комментарий отправлен!