Крутая и простая CSS анимация animate.css

Свой первый пост хочу начать с CSS. А именно с анимации — ведь это то, что выделит ваш сайт из потока однообразных ресурсов: а, следовательно, выделит вас среди остальных.

А теперь давайте перейдем к функционалу.

Я советую всем использовать именно эту библиотеку по нескольким причинам:

Во-первых, позволяет экономить своё же время на то, что уже было придумано людьми для других :)
Во-вторых, лучшая по функционалу и простоте использования;
В-третьих, подключается крайне просто;

Итак, вот она сама:
http://daneden.github.io/animate.css/

Там можно увидеть нечто подобное

На этой странице можно опробовать все варианты анимации и оценить их эффект.

Что же нужно сделать, чтобы перенести его к себе на страницу? По факту — нам будет нужен лишь один файл: animate.css

Найти и скачать его можно на той же странице.

Файл переносим в папку сайта (в идеале ко всем CSS). Подключаем как и прочие файлы в <head>

Чтобы использовать какой-либо эффект — нам нужно всего лишь запомнить (или скопировать) его название и вставить его к блоку, к которому хотим применить эффект.

К примеру у нас есть вот такой простой отрывок кода:

<body>
<div class="page">
</div>
</body>

<body>

</div>

</body>

И мы хотим применить анимацию fadeIn к блоку с классом page. Сделать нужно так:

<body>
<div class="page <strong>fadeIn</strong>">
</div>
</body>

<body>

<div class="page <strong>fadeIn</strong>">

</div>

</body>

Таким образом, мы получаем красивую анимацию и делаем это предельно просто!

Но есть несколько нюансов:

Если блок вне видимости пользователя — он отыграет свой эффект, не дождавшись его!
Эффект, который закончился — больше не будет запускаться, пока вы не обновите страницу (за исключением цикла — об этом позже).

Как же это решить? Для этого переходим на github:
https://github.com/matthieua/WOW

Скачиваем файл wow.js — аналогично поместим его в нужную директорию и подключим в <head>

И следом добавляем вот такой кусочек кода:

<script>new WOW().init();</script>

1	<script>new WOW().init();</script>

Затем нам необходимо лишь дописывать после нужного нам эффекта (вернемся к нашем примеру — fadeIn) через пробел указать ещё и wow. Выглядит это так:

<body>
<div class="page fadeIn <strong>wow</strong>">
</div>
</body>

<body>

</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 my_scripts_method6() {
	wp_register_script( 'WOW_start', 'http://wp/wp-content/uploads/2016/02/WOW_start-1.js');
	wp_enqueue_script( 'WOW_start' );
}  

add_action( 'wp_enqueue_scripts', 'my_scripts_method6');

function my_scripts_method6() {

wp_register_script( 'WOW_start', 'http://wp/wp-content/uploads/2016/02/WOW_start-1.js');

wp_enqueue_script( 'WOW_start' );

}

add_action( 'wp_enqueue_scripts', 'my_scripts_method6');

где
после function следует имя функции (на ваше усмотрение устанавливается)
в wp_register_script в первом поле задаем имя функции, во втором указываем полный путь до файла
в wp_enque_script вставляем наше имя
в конце фрагмента всё предельно понятно.

Вот и всё! С остальным проблем не будет!

Надеюсь кому-то я упростил жизнь этой статьей. Ставь лайк — если понравилась статья