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>

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

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

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (7)

Ася 6 июля в 09:46

Спасибо за наглядные видео-уроки) Доходчиво и по делу!

Ответить

Александр 8 февраля 2016 г. в 15:52

Спасибо за описание! Интересный прием, но есть небольшая проблема с которой я столкнулся при реализации на своем блоге.

Сайт у меня адаптивный и достаточно простой. Под любой экран все сжимается и растягивается. Так вот, графический контент, само собой, тоже подстраивается под размер экрана. А вот анимационный ЭТОТ эффект не подстраивается((

Например, есть картинка, которой я задал offset в 300 пикселей, чтобы на мониторах 14" и более она появлялась только после полной готовности, то есть после того, как она будет полностью помещаться в этом самом мониторе. И тут же возникла проблема: на мобильных устройствах 300px - это очень много, особенно на смартфоне с диагональю 4". Там я читаю текст, уже далеко ухожу вниз по статье и картинка только появляется, будучи на самом верху экрана.!((

И обратная ситуация: если я вообще не ставлю параметр offset, то на мониторе картинка начинает появляться буквально выглянув тонкой полоской и не видно ее полномасштабного красочного появления...

Подскажите, как можно решить данный вопрос? Как бы адаптивную настройку появления сделать? Может быть в самом js что-то прописать?? Из собственных соображений: было бы здорово, если бы offset считал пискели не от верха картинки, а от низа, тогда бы ставили всегда 0 и были бы уверены, что как только низом картинка коснулась нижней части экрана, то есть полностью готова к повлению, она бы и выплывала. Может быть можно в js как-нибудь добавить такой параметр? Я просто не особенно программер(

И еще вариант, но утопичный: Было бы можно хоть как-то гибче настроить, если бы этот самый offset задавался через css. Сделали бы стили через media разные для разных мониторов. НО параметр в html и его не разграничить для разных разрешений, насколько мне известно.

В общем, дилемма) Буду благодарен, если кто поможет!

Ответить

Михаил 3 декабря 2015 г. в 20:20

Приветствую. Подскажите как подключить jquery и где его взять? Что только не пробовал, где только не качал, ни чего не получается с анимацией при наведении мыши ((( Да и код, на видео один, а под видео совсем другой...

Ответить

Анастасия 7 августа 2015 г. в 06:00

Спасибо тебе огромное за статью очень помогло!!))

Ответить

Вячеслав 25 апреля 2015 г. в 23:11

Хорошо когда есть люди, которые освещают новые и очень полезные технологии. Очень ценно.

Ответить

Павел 22 апреля 2015 г. в 21:22

Спасибо Александр! уже многие ваши уроки были очень полезны и эти тоже то что нужно!

Ответить

Филипп 22 апреля 2015 г. в 16:55

Конечно, гениально! Что и говорить. Но просто по своему опыту(приучен к идеально чистому коду, даже свои сайты на WordPress очищаю от даже маломальских строчек плагинов и т.д. Ищу до последних сил, как спрятать лишние даже мета-подключения) скажу, что лучше написать самому JavaScript-код, чем использовать чужие, общедоступные скрипты такие как wow.js. Но это лишь мое мнение!
Когда недавно открывал свою студию PhilGroup, то долго бился над тем, как увеличить фотографии без стандартного плагина Fancybox for WordPress т.к. от него много мусора появляется, в конечном итоге в коде страницы. Потратив полмесяца, решение все же нашлось!
Спасибо вам, Александр, за такие доступные видео уроки! Это сейчас большая редкость!
Удачи вам и свежих сил для создания хорошего материала!

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад