Анимация при скролле на WordPress

На прошлом уроке, мы научились делать CSS анимацию элементов, используя библиотеки animate.css + wow.js. На этом уроке мы научимся как сделать тоже самое, но только на WordPress, как с плагином, так и без плагина.

Анимация при скролле без плагина

Как добавить в тему WordPress animate.css и wow.js и в дальнейшем применять их для анимирования элементов сайта?

1. Скачайте обе библиотеки
2. Создайте две папки: css и js
3. Положите в них animate.min.css и wow.min.js соответственно
4. Закачайте эти папки с файлами в вашу текущую тему на хостинге

Добавьте следующие строчки в functions.php, такой способ подключения считается безопасным, новые стили и скрипты регистрируются и ставятся в очередь. Вместо префикса twentyseventeen, вы пишите название вашей темы.

Регистрация и подключение animate.css и wow.js, используя событие wp_enqueue_scripts + Активация wow.js

В результате WordPress сам выведет ссылку в теге head на файл стилей с анимациями. Можно легко проверить, подключился ли файл, посмотрев на код страницы.

Ссылка на JS скрипт выведется внизу страницы.

Самая сложная часть процесса сделана - стили и скрипты подключены, пора заняться самой анимацией. На сайте https://daneden.github.io/animate.css есть примеры всех анимаций, выбираете класс и прописываете название класса вместе с wow, к любому блочному элементу на сайте.

После всех выполненных шагов, анимация при скролле страницы на WordPress, будет 100% работать, проверено на личном опыте.

Плагин анимации для WordPress – Animate it

С помощью плагина Animate It можно делать такие же анимации, как и без него, который работает на тех же библиотеках. Только не надо ничего подключать в functions.php, а просто скачать и активировать.

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

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

Одним словом, работать с Animate It легко и приятно. Но, не спешите, после прочтения статьи, идти по более легкому пути. В один прекрасный день, разработчик может бросить своё детище, перестать поддерживать, сделать плагин платным или вообще удалить. А при такой перспективе, осилить подключение библиотек правильным и безопасным способом, кажется более надежным способом. Тогда, вашей анимации ничего не угрожает, она будет работать всегда.