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

CSS анимация animate.css - Drogin.ru

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

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


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

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

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

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

animate.css

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

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

animate.css

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

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

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

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

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

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

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

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

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

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

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

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

Теперь всё очень круто: как только область видимости дойдет до глаз пользователя — анимация сработает!

Параметры animate.css

К нашим эффектам мы можно приписывать и некоторые параметры. Их не так уж и много:

  1. data-wow-duration: с помощью него можно изменить длительность анимации. Значение имеют такой формат 1s, 2s, 3s (1 секунда, 2 секунды, 3 секунды, соответственно);
  2. data-wow-delay: этот параметр позволяет задать задержку перед началом анимации; формат значений аналогичен;
  3. data-wow-offset: следующий параметр позволяет задать расстояние для запуска анимации. Началом считается нижний край браузера; формат значений — просто числа (10, 20 и т.п.);
  4. data-wow-iteration: наш последний параметр позволяет задать количество повторений анимации. Помните, я обещал немного позже рассказать про цикл? Так вот, с помощью этого параметра можно сделать анимацию бесконечной — именно он нам и поможет.

Аналогичные параметры имеет и animate. Изменяется лишь wow на animate.

animation-iteration-count: infinite; — этот параметр аналогичен последнему. Infinite задает бесконечный повтор анимации. Возможны самые различные значения в виде цифр.

Установка animate.css на WordPress

Хотелось бы уделить внимания и этому — так как сам столкнулся с подобным.

Чтобы подключить наши файлы, необходимо написать функцию, за исключением animate.css — его мы вписываем традиционно в header.php

Теперь что касается wow.js.

  1. Необходимо открыть наш functions.php в папке вашей темы
  2. В конце файла вставляем следующий код:

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

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

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

Подписывайся на новости — скоро будет много статей! Будь с нами 

 


10+
Подписаться на новости

Отправить ответ

Оставьте первый комментарий!

Уведомить о
wpDiscuz