WOW.js - це маленька бібліотека, яка дозволяє включати анімацію на певному етапі прокрутки сторінки. Важить дуже мало, і до того ж повністю самостійна - тобто немає необхідності підключати jQuery або інших монстрів.
Animate.CSS - скрипт, який безпосередньо відповідає за саму анімацію. По суті wow.js бере анімації саме з цієї штуки.
Як завантажити і підключити.
1 крок. Для роботи нам знадобитися завантажити скрипти wow.js і animate.css
2 крок. підключаємо скрипти
Тег script необхідно завжди додавати в кінець body. Це робиться для швидкості завантаження сторінки. Кожен раз, коли браузер доходить до тега script, завантаження і рендеринг всього сайту заморожується, поки скрипт не завантажиться. Від цього часто ми бачимо сайти, які довгий час просто білий аркуш. А так же, якщо скрипт розміщений в кінці body, у вас є гарантія що body - ready і скрипт точно відпрацює.
Крок 3. Необхідно ініціювати скрипт додавши ось такий код, відразу після його підключення:
На цьому підключення закінчується, і настає пора другого етапу.
Використання WOW.js
Крок 1. Вибираємо елемент, який хочемо анімувати і додаємо йому клас class = "wow". У коді нижче, я показав це на прикладі картинки:
Крок 2. Вибираємо анімацію, і додаємо її додатковим класом до нашої зображенні:
Крок 3 (не обов'язково). Додаємо настройки для анімації якщо треба, за допомогою спеціальних data-атрибутів:
У коді вище ми вказали, що анімація має спрацьовувати, коли картинка пройде 200 пікселів від низу екрана. Але при цьому у неї буде затримка в пів секунди, а сама анімація буде займати за часом рівно 2 секунди.
Налаштування WOW.js анімації через атрибути
data-wow-duration - вказуємо час програвання анімації
data-wow-delay - ставимо затримку перед програванням анімації
data-wow-offset - включення анімації, коли елемент проходить определнного кількість пікселів від низу екрана
data-wow-iteration - кількість повторів анімації
Звертаю вашу увагу на те, що ці атрибути необов'язкові. Якщо ви їх не вкажете, анімація буде просто програватися за замовчуванням, як тільки елемент з'явиться на екрані при прокручуванні вікна браузера.
