Печать

WOW.js + Animate.css - скрипт анимации при прокрутке страницы


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

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

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

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

1 шаг. Для работы нам понадобиться скачать скрипты wow.js и animate.css

Скачать

Файл animate.css – библиотека, в которой прописаны стили для анимации элементов на странице. Для того, чтобы визуально оценить и выбрать вид анимации, обычно, я использую страничку ресурса http://daneden.github.io/animate.css/

 

2 шаг. Подключаем скрипты

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

Тег 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 – количество повторов анимации

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

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


Защитный код
Обновить