На прошлом уроке , мы научились делать CSS анимацию элементов, используя библиотеки animate.css + wow.js . На этом уроке научимся как сделать тоже самое, но только на WordPress , как с плагином, так и без плагина.
На прошлом уроке, мы научились делать CSS анимацию элементов, используя библиотеки animate.css + wow.js. На этом уроке научимся как сделать тоже самое, но только на WordPress, как с плагином, так и без плагина.
Анимация при скролле без плагина
https://daneden.github.io/animate.css/
Как добавить в тему WordPress animate.css и wow.js и в дальнейшем применять их для анимирования элементов сайта?
- Скачайте обе библиотеки
- Создайте две папки: css и js
- Положите в них animate.min.css и wow.min.js соответственно
- Закачайте эти папки с файлами в вашу текущую тему на хостинге
Добавьте следующие строчки в functions.php, такой способ подключения считается безопасным, новые стили и скрипты регистрируются и ставятся в очередь. Вместо префикса twentyseventeen, вы пишите название вашей темы.
Регистрация и подключение animate.css и wow.js, используя событие wp_enqueue_scripts + Активация wow.js
В результате WordPress сам выведет ссылку в теге head на файл стилей с анимациями. Можно легко проверить, подключился ли файл, посмотрев на код страницы.
<link rel='stylesheet' id='animate-css' href='http://www.your-site.com/wp-content/themes/twentyseventeen/css/animate.min.css?ver=4.9.7' type='text/css' media='all' />
Ссылка на JS скрипт выведется внизу страницы.
<script type='text/javascript' src='http://www.your-site.com/wp-content/themes/twentyseventeen/js/wow.min.js?ver=4.9.7'></script>
Самая сложная часть процесса сделана - стили и скрипты подключены, пора заняться самой анимацией. На сайте https://daneden.github.io/animate.css есть примеры всех анимаций, выбираете класс и прописываете название класса вместе с wow, к любому блочному элементу на сайте.
<div class="wow bounceInUp">Здесь ваш текст, картинка, видео..</div>
После всех выполненных шагов, анимация при скролле страницы на WordPress, будет 100% работать, проверено на личном опыте.
Плагин анимации для WordPress – Animate it
С помощью плагина Animate It можно делать такие же анимации, как и без него, который работает на тех же библиотеках. Только не надо ничего подключать в functions.php, а просто скачать и активировать.
Кроме того сайт с плагином имеет отличную документацию со скриншотами, даже если вы совсем не знаете английский, то можно разобраться, только по скриншотам.
На странице плагина, я обнаружил замечательный генератор классов. Это может пригодиться для генерации кода для анимации по клику и наведению.
Одним словом, работать с Animate It легко и приятно. Но, не спешите, после прочтения статьи, идти по более легкому пути. В один прекрасный день, разработчик может бросить своё детище, перестать поддерживать, сделать плагин платным или вообще удалить. А при такой перспективе, осилить подключение библиотек правильным и безопасным способом, кажется более надежным способом. Тогда, вашей анимации ничего не угрожает, она будет работать всегда.
