Як зробити анімацію при прокручуванні сторінки

Доброго вечора шановні читачі, передплатники та всі хто нас пам'ятає!) Минуло півроку, як ми зробили велику перерву і тепер з новими силами готові радувати Вас черговими випусками уроків по веб програмуванню. Чесно сказати, сам не очікував, що так все затягнеться, але ось так от вийшло. Почнемо насамперед з того, що під Новий Рік, я вітаючи Вас, сказав про наші плани на майбутнє, тому потихеньку буде їх виконувати. А сьогодні хочу порадувати Вас своїм ювілейним 100-ю уроком!) Бажаю удачі!

Перш за все хочу познайомити Вас з однієї WOW бібліотекою, яку Ви можете подивитися, а потім завантажити на GitHub.

Вона дозволяє, саме при прокручуванні сторінки в потрібний момент здійснювати анімацію. Тобто, простими словами, коли Ви опускаетесь по сайту вниз, потрібний ефект в даний момент і спрацьовує, а не відразу, як завантажиться сторінка. Після того, як Ви скачаєте цю бібліотеку, можете переходити і завантажувати сам CSS файл анімації, який при вказівці, відповідного класу елементу, може виконувати зазначену анімацію. Щоб швидше ознайомитися з даним матеріалом, пропоную Вам подивитися невеликий урок, хто не хоче можете далі продовжити вивчати в текстовому вигляді на сайті.

Перший крок. JQuery WoW

І так, щоб наш скрипт з Вами заробив, нам потрібно його форматувати, тобто запустити. Для цього ми повинні прописати наступне:

Для початку будь-якого елементу потрібно вказати обов'язковий клас wow. а потім вже по посиланню самої анімації. вибрати потрібний Вам ефект, наприклад fadeInDown.

Схожі статті