WOW.js + Animate.css – скрипт анимации для сайта
Сегодня мы будем учиться анимировать объекты сайта легко и быстро, при помощи двух скриптов. Название которых вы можете наблюдать выше, в заголовке этой статьи. Но в начале, давайте я вам расскажу, для чего нужен каждый из них.
WOW.js – это маленькая библиотека, которая позволяет включать анимацию на определенном этапе прокрутки страницы. Весит очень мало, и к тому же полностью самостоятельна – то есть нет необходимости подключать jQuery или других монстров.
Animate.CSS – скрипт, который непосредственно отвечает за саму анимацию. По сути wow.js берет анимации именно из этой штуки. А там их несколько десятков.
Недостаток animate.css заключается в том, что это всего лишь обычный набор CSS-правил завязанных на анимации. То есть они проигрываются сразу после загрузки страницы. И если анимируемые элементы не видны на "первом" экране, то всю эту красоту посетители просто не увидят. Ведь она проиграется еще до того, как они перемотают страницу к нужному месту.
И в первой заметке (ссылка в следующем абзаце), что бы этого не происходило, я показывал вам, как и где прописывать js-коды, что бы анимация проигрывалась на определенном этапе скролла страницы. Это было крайне неудобно, однако работало на ура
Поэтому, перед тем как начать, советую посмотреть урок “Animate.CSS + анимация при прокрутке”. Так как я уже буду подразумевать, что вы умеете пользоваться анимацией на сайте. Заодно вы сразу поймете, насколько wow.js облегчает работу. Ведь теперь нам не надо будет писать и копаться в js-коде. Подключил и забыл
И так, с введением покончено. Теперь давайте ближе к "телу". Я записал видео-урок по этой теме, однако перед просмотром, хочу показать то, что получится у вас, если пройдете урок до конца на практике. Так сказать, для большей мотивации
Ну что, посмотрели? Вот это вы "забабахаете" собственными руками. Поэтому сейчас бегом смотреть видео.
Урок: WOW.js и Animate.CSS - вместе веселее!
Ссылки из видео:
Дерзайте!
Настройка 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 и скрипт точно отработает.
Спасибо Роману Беляеву за подробные объяснения в подключении скриптов на сайте.
Шаг 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
– количество повторов анимации
Обращаю ваше внимание на то, что эти атрибуты не обязательные. Если вы их не укажете, анимация будет просто проигрываться по умолчанию, как только элемент появится на экране при прокрутке окна браузера.
Ну что же ребята. На этом пожалуй все. Если будут вопросы – задавайте в комментариях ;)
Дякс, классная штука
Серега, ты - чудо! Прости за фамильярность. Искал в поисковике инфо по скрипту before/after и попал сначала на твой канал, а потом и сюда)) Вот и завис здесь уже часов на 5))
Работаю над своим проектом и мне все это оооочень полезно и интересно! Спасибо тебе! Обязательно пройду у тебя тренинг Верстаем на 5+
Успехов тебе!
А как прилепить к теме вордпресса ато выдает Uncaught ReferenceError: WOW is not defined
Это значит, ты скрипт wow.js не приконнектил в шаблоне
А что насчет адаптивности? Например сделать на десктопной версии data-wow-offset="200" а на мобильной версии data-wow-offset="100". Такая есть возможность?
А как сделать так что бы анимация повтрорялась через какое-то время?
отлично! спасибо!
Спасибо. Познавательно и пользительно.
Однако скачав архив 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 - палтный для коммерческого использования?
Проморочилась весь день с анимацией. Никак не могла понять, почему не работает. Зашла на ваш сайт и, о чудо!!! Всего лишь один скрипт new WOW().init(); осветлил мои надежды))
Все очень классно, все работает! Только есть вопросик: Можно ли как-то сделать, чтобы при повторной прокрутке анимация повторялась без обновления страницы, а так же анимация работала при прокрутке вверх? Самостоятельно так и не смог сообразить как такое можно сделать.
Вот есть два плагина для реализации такое же функциональности как wow.
Можно реализовывать повторный запуск анимации при прокрутке в любую сторону вот этим плагином https://github.com/Talalaev/scrollingAnchors
А запускать анимацию animate.css вот этим плагином https://github.com/Talalaev/Jazzy
Очень гибкая штука так как можно отслеживать все события в процессе анимации.
Небольшая заметка по первому плагину - https://www.talalaev.com.ua/2016/04/scrolling-anchor.html
Сергей, доброго времени суток! При просмотре видео меня очень заинтересовал редактор, что Вы используете для вёрстки - очень удобный. Могли бы подсказать название? Спасибо!
Сергей, спасибо! Уже не нужно. Прочитал в заголовке программы: "Brackets"
спасибо, очень полезный урок
а вот с данным функционалом https://ruseller.com/lessons/les1878/Demo/demo.html не работает, анимации нет, вообще блоки не появляются
День добрый! Спасибо за статью. В notepad все работает, а вот в wordpress ..... Подскажите как в wordpress произвести подключение wow.min.js и скрипта, второй день мучаюсь и бестолку. ПОМОГИТЕ
Здравствуйте!
Серега, ты молодец!!!
Добрый день!
Подскажите, а как можно сделать, чтобы этот wow срабатывал при overflow:scroll-y. Т.е. я скролл не страницы, а div делаю и элемент, который должен мигать находится в этом div.
День добрый! Подскажите а зачем прописывать style? если указаны class
Еще раз день добрый! Почему то не срабатывает атрибут задержки. Куда рыть
Есть одна проблема. Когда страница загружается, то анимированные элементы сначала на мгновение просто появляются на экране, а потом еще раз появляются уже с анимацией. Как сделать чтоб они появлялись первый раз уже с анимацией? Подскажите если не сложно.
.wow{
visiblity: hidden;
}