WOW.js + Animate.css – скрипт анимации для сайта

WOW.js + Animate.css – скрипт анимации для сайта

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

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

Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки. А там их несколько десятков.

Тренинг по вёрстке сайта на HTML5 и CSS3

Недостаток animate.css заключается в том, что это всего лишь обычный набор CSS-правил завязанных на анимации. То есть они проигрываются сразу после загрузки страницы. И если анимируемые элементы не видны на "первом" экране, то всю эту красоту посетители просто не увидят. Ведь она проиграется еще до того, как они перемотают страницу к нужному месту.

И в первой заметке (ссылка в следующем абзаце), что бы этого не происходило, я показывал вам, как и где прописывать js-коды, что бы анимация проигрывалась на определенном этапе скролла страницы. Это было крайне неудобно, однако работало на ура cool smile

Поэтому, перед тем как начать, советую посмотреть урок “Animate.CSS + анимация при прокрутке”. Так как я уже буду подразумевать, что вы умеете пользоваться анимацией на сайте. Заодно вы сразу поймете, насколько wow.js облегчает работу. Ведь теперь нам не надо будет писать и копаться в js-коде. Подключил и забыл wink

И так, с введением покончено. Теперь давайте ближе к "телу". Я записал видео-урок по этой теме, однако перед просмотром, хочу показать то, что получится у вас, если пройдете урок до конца на практике. Так сказать, для большей мотивации power

WOW.js на примере

Ну что, посмотрели? Вот это вы "забабахаете" собственными руками. Поэтому сейчас бегом смотреть видео.

Урок: WOW.js и Animate.CSS - вместе веселее!

Ссылки из видео:

  1. Ссылка на архив WOW.js.rar
  2. Скачать Animate.CSS
  3. Скачать WOW.js

Дерзайте! ok

Настройка WOW.js

Как скачать и подключить.

1 шаг. Скачать скрипты wow.js и animate.css с официальных сайтов (ссылки смотрите выше под видео) и разместить их в папке своего проекта.

2 шаг. Подключаем скрипты простым HTML кодом на странице в теге <head> :

<link rel="stylesheet" href="animate.min.css">
<script src="wow.min.js"></script>

Примечание от подписчика канала Master-CSS:

Тег script необходимо всегда добавлять в конец body. Это делается для быстроты загрузки страницы. Каждый раз, когда браузер доходит до тега script, загрузка и рендеринг всего сайта замораживается, пока скрипт не будет загружен. От этого зачастую мы видим сайты, которые долгое время просто белый лист. А так же, если скрипт размещён в конце body, у вас есть гарантия что body - ready и скрипт точно отработает. smile

Спасибо Роману Беляеву за подробные объяснения в подключении скриптов на сайте.

Шаг 3. Необходимо инициализировать скрипт добавив вот такой код, сразу после его подключения:

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

На этом подключение заканчивается, и настает пора второго этапа.

Использование WOW.js

Шаг 1. Выбираем элемент, который хотим анимировать и добавляем ему класс class="wow" . В коде ниже, я показал это на примере картинки:

<img 
class="wow" 
src="images/dog1.jpg" 
alt="Собака - лучший друг человека">

Шаг 2. Выбираем анимацию, и добавляем её дополнительным классом к нашей собачке:

<img 
class="wow zoomInUp" 
src="images/dog1.jpg" 
alt="Собака - лучший друг человека">

Шаг 3. Добавляем настройки для анимации если надо, при помощи специальных data-атрибутов :

<img 
class="wow zoomInUp" 
data-wow-offset="200" 
data-wow-delay="0.5s" 
data-wow-duration="2s" 
src="images/dog1.jpg" 
alt="Собака - лучший друг человека">

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

Настройки WOW.js анимации через атрибуты

data-wow-duration – указываем время проигрывания анимации

data-wow-delay – ставим задержку перед проигрыванием анимации

data-wow-offset – включение анимации, когда элемент проходит определнное количество пикселей от низа экрана

data-wow-iteration – количество повторов анимации

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

Ну что же ребята. На этом пожалуй все. Если будут вопросы – задавайте в комментариях ;)

Комментариев: 22 RSS

Тренинг по вёрстке сайта на HTML5 и CSS3
Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

Комментариев: 22
  •  Oleg | 24 июня 2015 в 17:27:22

    Дякс, классная штука

  •  Вадим | 10 июля 2015 в 09:34:29

    Серега, ты - чудо! Прости за фамильярность. Искал в поисковике инфо по скрипту before/after и попал сначала на твой канал, а потом и сюда)) Вот и завис здесь уже часов на 5))

    Работаю над своим проектом и мне все это оооочень полезно и интересно! Спасибо тебе! Обязательно пройду у тебя тренинг Верстаем на 5+

    Успехов тебе!

  •  Алексей | 19 августа 2015 в 18:14:35

    А как прилепить к теме вордпресса ато выдает Uncaught ReferenceError: WOW is not defined

    •  Феодул | 25 августа 2015 в 11:39:20

      Это значит, ты скрипт wow.js не приконнектил в шаблоне

  •  Андрей | 7 сентября 2015 в 20:16:20

    А что насчет адаптивности? Например сделать на десктопной версии data-wow-offset="200" а на мобильной версии data-wow-offset="100". Такая есть возможность?

  •  Ирина | 3 октября 2015 в 18:48:53

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

  •  Qw | 27 декабря 2015 в 14:42:43

    отлично! спасибо!

  •  Александр | 1 февраля 2016 в 13:29:34

    Спасибо. Познавательно и пользительно.

    Однако скачав архив WOW.js.rar не обнаружил в нем самого wow.js, а еще на страничке не прописана ни одна анимация и все элементы статичны...

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

    Хотя параметры data-wow* ни в какую не срабатывают... увы одного WOW init не достаточно.

    Где-то нарыл - не пмню:

    wow = new WOW({

    animateClass: 'animated',

    offset: 100,

    callback: function(box) {

    console.log("WOW: animating ")

    }

    });

    wow.init(); document.getElementById('moar'). { var secti

    section.className = 'section--purple wow fadeInDown';

    this[removed].insertBefore(section, this);

    };

  •  Автор WOW.js | 17 марта 2016 в 12:21:26

    Ниче, что скрипт wow.js - палтный для коммерческого использования?

  •  Аноним | 23 марта 2016 в 01:49:16

    Проморочилась весь день с анимацией. Никак не могла понять, почему не работает. Зашла на ваш сайт и, о чудо!!! Всего лишь один скрипт new WOW().init(); осветлил мои надеждыsmile))

  •  Сергей | 4 апреля 2016 в 13:18:27

    Все очень классно, все работает! Только есть вопросик: Можно ли как-то сделать, чтобы при повторной прокрутке анимация повторялась без обновления страницы, а так же анимация работала при прокрутке вверх? Самостоятельно так и не смог сообразить как такое можно сделать.

    •  Михаил | 12 августа 2016 в 14:11:39

      Вот есть два плагина для реализации такое же функциональности как wow.

      Можно реализовывать повторный запуск анимации при прокрутке в любую сторону вот этим плагином https://github.com/Talalaev/scrollingAnchors

      А запускать анимацию animate.css вот этим плагином https://github.com/Talalaev/Jazzy

      Очень гибкая штука так как можно отслеживать все события в процессе анимации.

      Небольшая заметка по первому плагину - http://www.talalaev.com.ua/2016/04/scrolling-anchor.html

  •  jack.anderson | 22 июня 2016 в 11:00:00

    Сергей, доброго времени суток! При просмотре видео меня очень заинтересовал редактор, что Вы используете для вёрстки - очень удобный. Могли бы подсказать название? Спасибо!

    •  jack.anderson | 22 июня 2016 в 12:04:05

      Сергей, спасибо! Уже не нужно. Прочитал в заголовке программы: "Brackets"

  •  Фарход | 21 августа 2016 в 12:31:35

    спасибо, очень полезный урок

  •  Александр | 15 сентября 2016 в 16:37:54

    а вот с данным функционалом http://ruseller.com/lessons/les1878/Demo/demo.html не работает, анимации нет, вообще блоки не появляются

  •  Юрий | 7 декабря 2016 в 15:45:44

    День добрый! Спасибо за статью. В notepad все работает, а вот в wordpress ..... Подскажите как в wordpress произвести подключение wow.min.js и скрипта, второй день мучаюсь и бестолку. ПОМОГИТЕ

  •  Михаил | 25 января 2017 в 22:27:18

    Здравствуйте!

  •  Виталий | 2 февраля 2017 в 12:49:00

    Серега, ты молодец!!!

  •  Юлия | 9 февраля 2017 в 15:21:59

    Добрый день!

    Подскажите, а как можно сделать, чтобы этот wow срабатывал при overflow:scroll-y. Т.е. я скролл не страницы, а div делаю и элемент, который должен мигать находится в этом div.

  •  Юрий | 11 июня 2017 в 18:40:02

    День добрый! Подскажите а зачем прописывать style? если указаны class

  •  Юрий | 11 июня 2017 в 19:00:36

    Еще раз день добрый! Почему то не срабатывает атрибут задержки. Куда рыть