Свой первый пост хочу начать с CSS. А именно с анимации — ведь это то, что выделит ваш сайт из потока однообразных ресурсов: а, следовательно, выделит вас среди остальных.
А теперь давайте перейдем к функционалу.
Я советую всем использовать именно эту библиотеку по нескольким причинам:
Во-первых, позволяет экономить своё же время на то, что уже было при
умано людьми для других :)
Во-вторых, лучшая по функционалу и простоте использования;
Файл переносим в папку сайта (в идеале ко всем CSS). Подключаем как и прочие файлы в <head>
Чтобы использовать какой-либо эффект — нам нужно всего лишь запомнить (или скопировать) его название и вставить его к блоку, к которому хотим применить эффект.
К примеру у нас есть вот такой простой отрывок кода:
1
2
3
4
<body>
<div class="page">
</div>
</body>
И мы хотим применить анимацию fadeIn к блоку с классом page. Сделать нужно так:
1
2
3
4
<body>
<div class="page <strong>fadeIn</strong>">
</div>
</body>
Таким образом, мы получаем красивую анимацию и делаем это предельно просто!
Но есть несколько нюансов:
Если блок вне видимости пользователя — он отыграет свой эффект, не дождавшись его!
Эффект, который закончился — больше не будет запускаться, пока вы не обновите страницу (за исключением цикла — об этом позже).
Скачиваем файл wow.js — аналогично поместим его в нужную директорию и подключим в <head>
И следом добавляем вот такой кусочек кода:
1
<script>newWOW().init();</script>
Затем нам необходимо лишь дописывать после нужного нам эффекта (вернемся к нашем примеру — fadeIn) через пробел указать ещё и wow. Выглядит это так:
1
2
3
4
<body>
<div class="page fadeIn <strong>wow</strong>">
</div>
</body>
Теперь всё очень круто: как только область видимости дойдет до глаз пользователя — анимация сработ
ет!
Параметры animate.css
К нашим эффектам мы можно приписывать и некоторые параметры. Их не так уж и много:
data-wow-duration: с помощью него можно изменить длительность анимации. Значение имеют такой формат 1s, 2s, 3s (1 секунда, 2 секунды, 3 секунды, соответственно);
data-wow-delay: этот параметр позволяет задать задержку перед началом анимации; формат значений аналогичен;
data-wow-offset: следующий параметр позволяет задать расстояние для запуска анимации. Началом считается нижний край браузера; формат значений — просто числа (10, 20 и т.п.);
data-wow-iteration: наш последний параметр позволяет задать количество повторений анимации. Помните, я обещал немного позже рассказать про цикл? Так вот, с помощью этого параметра можно сделать анимацию бесконечной — именно он нам и поможет.
Аналогичные параметры имеет и animate. Изменяется лишь wow на animate.
animation-iteration-count: infinite; — этот параметр аналогичен последнему. Infinite задает бесконечный повтор анимации. Возможны самые различные значения в виде цифр.
Установка animate.css на WordPress
Хотелось бы уделить внимания и этому — так как сам столкнулся с подобным.
Чтобы подключить наши файлы, необходимо написать функцию, за исключением animate.css — его мы вписываем традиционно в header.php
Теперь что касается wow.js.
Необходимо открыть наш functions.php в папке вашей темы
где
после function следует имя функции (на ваше усмотрение устанавливается)
в wp_register_script в первом поле задаем имя функции, во втором указываем полный путь до файла
в wp_enque_script вставляем наше имя
в конце фрагмента всё предельно понятно.
Вот и всё! С остальным проблем не будет!
Надеюсь кому-то я упростил жизнь этой статьей. Ставь лайк — если понравилась статья
Подписывайся на новости — скоро будет много статей! Будь с нами!
