Animate.css в примерах

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

HTML

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

<h1 class="animated" data-effect="pulse">Заголовок</h1>

jQuery




Вот небольшой код на jQuery, который будет отслеживать событие наведения курсора мыши на элемент и в случае возникновения данного события, скрипт добавит к нему класс, значение которого прописано в атрибуте data-effect. За счет добавления этого класса будет применена анимация.

function animate(elem){
    var effect = elem.data("effect");
    if(!effect || elem.hasClass(effect)) return false;
    elem.addClass(effect);
    setTimeout( function(){
        elem.removeClass(effect);
    }, 1000);
}
 
$(".animated").mouseenter(function() {
    animate($(this));
});

Естественно данный скрипт вы можете изменить как угодно, к примеру, вы можете поменять в нем событие mouseenter на click. Тогда в этом случае анимация будет происходить не в момент наведения мыши на элемент, а в момент клика.

Делаем анимацию при прокрутке страницы

Смотреть видеоурок

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

А именно вы можете задавать различные эффекты для элементов при прокрутке страницы. Для этих целей помимо animate.css, нам потребуется еще специальный скрипт wow.js.

JS

Поэтому скачайте wow.js, подключите его к странице и сделайте инициализацию.

<script src="js/wow.min.js"></script>
<script>
    new WOW().init();
</script>

Обращаю ваше внимание, что данный скрипт написан на чистом JS и для его работы не требуется подключать библиотеку jQuery.

HTML

Теперь, чтобы сделать анимацию элемента при прокрутке, просто задайте для данного элемента 2 класса: первый – это wow, а второй – это название того эффекта, который вы хотите применять.

В моем случае я задал pulse.

Замечание: при использование wow.js вам не нужно задавать для элементов класс animated, как мы делали ранее. Это все потому что данный скрипт автоматически задает этот класс.

<h1 class="wow pulse">Заголовок</h1>

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

По аналогии, вы можете задать класс wow и класс с требуемым эффектом для каких-то других элементов и все они будут красиво появляться при прокрутке.

Настройки анимации wow.js

В принципе, с настройками по умолчанию, у вас все будет замечательно работать.

Но если вам потребуется поменять продолжительность эффекта, задать задержку перед появлением анимации и прочее, то все это можно реализовать с помощью атрибутов, которые указаны ниже:

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

<h1 class="wow pulse" data-wow-duration="2s" data-wow-delay="5s">Заголовок</h1>

В примере выше, мы с вами задали продолжительность анимации 2 секунды и задержку перед началом анимации в 5 секунд.

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




А две другие настройки уже задают не время, поэтому там указываем числовое значение (см. пример ниже).

<h1 class="wow pulse" data-wow-offset="10"  data-wow-iteration="10">Заголовок</h1>

Это все, что я хотел вам рассказать в рамках данного урока.

В конце хотелось бы добавить, что анимация действительно является классным эффектом, с помощью которого вы сможете сделать сайт более привлекательным, но здесь самое главное знать меру и не переусердствовать. Иначе изобилие анимации может вызвать отрицательную реакцию.

Источник