Плагины для создания анимации при скроллинге

В этой статье мы рассмотрим различные плагины, которые помогают анимировать элементы при прокрутке страницы. Мы начнем с самых простых плагинов Wow.js и scrollReveal.js, которые не требуют знания javascript, и закончим плагинами SuperScrollorama и ScrollMagic, в которых без знания javascript уже не обойтись.
Плагины, которые мы рассмотрим:

• Wow.js
• scrollReveal.js
• Skrollr.js
• ScrollMagic

WOW.js

See the Pen wow.js+animate.css | first steps by Alexey (@CreativeSeo33) on CodePen.

Wow.js добавляет любую css анимацию (например, animate.css) к HTML элементам.
Например, элемент будет невидимым, пока пользователь не прокрутит страницу до него.
Использовать плагин очень просто, вам не понадобятся знания javascript.
Пример кода:

Элемент div появится с анимацией bounceInUp, когда пользователь прокрутит до него.
Также вы можете задать параметры duration , delay , offset и iteration.

scrollReveal.js

Пример анимации scrollReveal.js:

See the Pen Scroll Reveal by Alexey (@CreativeSeo33) on CodePen.

scrollReveal.js более сложный плагин и позволяет контролировать больше параметров.
Вы можете не только выбрать направление, в котором элемент появится, но также вы можете объединять эффекты с помощью ключевых слов from, and, then, with.
wait или after определяют задержку между анимациями.

Пример кода:

Первый элемент появится как только попадет в область видимости.
У второго элемента заданы параметры анимации с которой он должен появиться, когда попадет в область видимости.

Skrollr.js

Пример анимации Skrollr.js:

See the Pen Merry Christmallax — Skrollr.js animation by Alexey (@CreativeSeo33) on CodePen.

Skrollr один из моих любимых плагинов.
Skrollr может вызывать анимации не только тогда, когда элемент попадает в область видимости, но и когда покидает ее. Также вы можете контролировать длительность анимации.
Другими словами, вы можете задать сколько пикселей пользователю надо будет промотать, чтобы анимация выполнилась полностью.

SuperScrollorama

Пример анимации SuperScrollorama:

See the Pen Text animation path[Cree Indian Prophecy] by Alexey (@CreativeSeo33) on CodePen.

SuperScrollorama один из самых сложных плагинов, требующий знаний javascript. Если у вас хорошие знания javascript, то эта библиотека для вас.
С помощью этой библиотеки можно создавать сложные анимации:

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

ScrollMagic

Пример анимации ScrollMagic:

See the Pen Simple ScrollMagic Tutorial by Alexey (@CreativeSeo33) on CodePen.

ScrollMagic один из самых последних плагинов анимации скроллинга и является переписанным предшественником SuperScrollorama.
Он также разработан Greensock и позволяет создавать сложные последовательности анимаций.
Преимущества:

• оптимизированная производительность;
• гибкость;
• большая совместимость;
• хорошо подходит для адаптивного дизайна;

Более подробно про анимацию с помощью ScrollMagic:

• ScrollMagic инструкция – полноэкранное слайдшоу
• ScrollMagic – Создание анимации при прокрутке страницы