Всем привет!
Как писал ранее, продолжаю постепенно создавать свое портфолио в виде сайта с проектами и параллельно на этом учусь web-разработке. И в один момент мне захотелось добавить немного динамики в графики, при этом, чтобы анимация запускалась только в момент докрутки пользователя до нужного элемента. В итоге наткнулся на чудесный скрипт WOW js.
Да, запуск анимации при скролле можно настроить через ванильный JS (чуть позже напишу сам этот код) или же с помощью плагина ScrollMe jQuery, но я решил не усложнять себе жизнь и нашел прекрасный для моих нужд wow js.
Сам скрипт очень маловесный, о чем нам говорит bundlephobia:
Что по установке: достаточно скачать его с GitHub и подключить к проекту. Ссылка на него тут.
По использованию он также очень прост, нужно сделать всего пару вещей:
- Добавить класс wow к элементу. В моем случае вот так:
- Добавить в main.js параметры wow:
Где:
- offset расстояние от нижнего края браузера для запуска анимации;
- mobile - подключает анимацию на мобильных устройствах, если true;
- live - добавляет анимацию даже на динамически добавленных элементах.
Также прям в элемент можно добавить дополнительные настройки:
- data-wow-duration - продолжительность анимации
- data-wow-delay - задержка перед запуском анимации
- data-wow-offset - расстояние от нижнего края браузера для запуска анимации
- data-wow-iteration - количество повторов анимации
Как итог, wow.js отличный скрипт, если нужно быстро добавить анимацию при скролле страницы!
