Плагины для создания анимации при скроллинге
В этой статье мы рассмотрим различные плагины, которые помогают анимировать элементы при прокрутке страницы. Мы начнем с самых простых плагинов Wow.js и scrollReveal.js, которые не требуют знания javascript, и закончим плагинами SuperScrollorama и ScrollMagic, в которых без знания javascript уже не обойтись.
Плагины, которые мы рассмотрим:
- Wow.js
- scrollReveal.js
- Skrollr.js
- ScrollMagic
WOW.js
Пример анимации WOW.js:
See the Pen wow.js+animate.css | first steps by Alexey (@CreativeSeo33) on CodePen.
Wow.js добавляет любую css анимацию (например, animate.css) к HTML элементам.
Например, элемент будет невидимым, пока пользователь не прокрутит страницу до него.
Использовать плагин очень просто, вам не понадобятся знания javascript.
Пример кода:
1 | <div class="wow bounceInUp">Content to Reveal Here</div> |
Элемент 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 определяют задержку между анимациями.
Пример кода:
1 2 3 4 5 | <!-- Появление элемента с дефолтными параметрами --> <div data-scroll-reveal> Hello world! </div> <!-- Появление элемента с заданными параметрами --> <div data-scroll-reveal="enter left and move 50px over 1.33s"> Foo </div> |
Первый элемент появится как только попадет в область видимости.
У второго элемента заданы параметры анимации с которой он должен появиться, когда попадет в область видимости.
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: