WOW.js скачати, скрипт анімації для сайту
- Урок: WOW.js і Animate.CSS - разом веселіше!
- Налаштування WOW.js
- Використання WOW.js
- Налаштування WOW.js анімації через атрибути
Сьогодні ми будемо вчитися анімувати об'єкти сайту легко і швидко, за допомогою двох скриптів. Назва яких ви можете спостерігати вище, в заголовку цієї статті. Але на початку, давайте я вам розповім, для чого потрібен кожен з них.
WOW.js - це маленька бібліотека, яка дозволяє включати анімацію на певному етапі прокрутки сторінки. Важить дуже мало, і до того ж повністю самостійна - тобто немає необхідності підключати jQuery або інших монстрів.
Animate.CSS - скрипт, який безпосередньо відповідає за саму анімацію. По суті wow.js бере анімації саме з цієї штуки. А там їх кілька десятків.
Недолік animate.css полягає в тому, що це всього лише звичайний набір CSS-правил зав'язаних на анімації. Тобто вони програються відразу після завантаження сторінки. І якщо аніміруемие елементи не видно на "першому" екрані, то всю цю красу відвідувачі просто не побачать. Адже вона програється ще до того, як вони перемотати сторінку до потрібного місця.
І в першій замітці (посилання в наступному абзаці), що б цього не відбувалося, я показував вам, як і де прописувати js-коди, що б анімація програвалася на певному етапі скролла сторінки. Це було вкрай незручно, проте працювало на ура 
Тому, перед тим як почати, раджу подивитися урок " Animate.CSS + анімація при прокручуванні ". Так як я вже буду мати на увазі, що ви вмієте користуватися анімацією на сайті. Заодно ви відразу зрозумієте, наскільки wow.js полегшує роботу. Адже тепер нам не треба буде писати і копатися в js-коді. Підключив і забув 
І так, з введенням покінчено. Тепер давайте ближче до "тіла". Я записав відео-урок по цій темі, однак перед переглядом, хочу показати те, що вийде у вас, якщо пройдете урок до кінця на практиці. Так би мовити, для більшої мотивації 
WOW.js на прикладі
Ну що, подивилися? Ось це ви "забабахати" власними руками. Тому зараз бігом дивитися відео.
Урок: WOW.js і Animate.CSS - разом веселіше!
Посилання з відео:
- Посилання на архів WOW.js.rar
- завантажити Animate.CSS
- завантажити WOW.js
Дерзайте! 
Налаштування 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 - кількість повторів анімаціїЗвертаю вашу увагу на те, що ці атрибути необов'язкові. Якщо ви їх не вкажете, анімація буде просто програватися за замовчуванням, як тільки елемент з'явиться на екрані при прокручуванні вікна браузера.
Ну що ж хлопці. На цьому мабуть все. Якщо будуть питання - задавайте в коментарях;)