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

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

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

Раньше для реализации этих эффектов, приходилось использовать только лишь JS, но развитие не стоит на месте и с выходом CSS3 все эти эффекты можно реализовать на нем.




В данном уроке мы с вами познакомимся с очень интересным инструментом под названием animate.css. Это уже готовая CSS таблица стилей, которая в своем арсенале имеет свыше 50 различных эффектов и все эти эффекты реализованы на CSS3.

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

А теперь давайте более детально познакомимся с animate.css.

Базовая HTML разметка

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

Сперва вам необходимо скачать и подключить данную таблицу стилей к вашей странице.

<link rel="stylesheet" href="css/animate.min.css" />

А затем задайте 2 класса для того элемента, к которому вы хотите применить анимацию.

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

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

Если вы хотите задать какой-то другой эффект, то вместо pulse, укажите название этого эффекта.

Все доступные названия приведены в списке ниже, а как они выглядят в действии, вы можете посмотреть на официальном сайте animate.css.

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Бесконечная анимация

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

Но что делать если вам нужно чтобы анимация продолжалась без остановки?

Для этого достаточно добавить еще один класс для нашего анимируемого элемента. Это класс – infinite.

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

Задаем анимацию при наведении мыши на элемент

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

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

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

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

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

data-wow-duration: изменяет продолжительность анимации.

data-wow-delay: задает задержку перед появлением анимации.

data-wow-offset: указывает расстояние на которое мы должны прокрутить нашу страницу, прежде чем анимация примениться к элементу. Это расстояние рассчитывается от нижней границы браузера до анимируемого элемента.

data-wow-iteration: устанавливает сколько раз должен повториться данный эффект. По умолчанию, эффект повторяется один раз.

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

<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>

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

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

Источник

One thought on “Animate.css в примерах

  • 15/09/2020 в 13:23
    Permalink

    Если вам нужна анимация при клике или наведении мыши без jQuery. Используйте JS оператор добавления класса. После анимации, удалите класс. Как узнать что анимация закончилась и удалить класс? Используйте функцию el.addEventListener(“animationend”, () => { //del class// });
    И цикличная анимация сейчас добавляется по новому. Просто добавьте к элементу класс animate__infinite

    Ответ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.