CSS анімація елементів під час прокручування сторінки
Для початку я підготував html сторінку з простими елементами (заголовками та картинками) які анімуватимемо. Ось HTML код сторінки:
І проста CSS розмітка:
Як бачимо, все дійсно дуже просто.
Підключаємо animate.css. Робимо анімацію елементів
Завантажуємо бібліотеку animate.css. Я поклав файл animate.min.css у папку /libs поруч із html сторінкою. Підключаємо animate.min.css як звичайний css файл між теами .
Тепер до елементів, яким необхідно застосувати анімацію, треба додати потрібні класи css стилів. Необхідно додати клас animated і клас з назвою анімації, наприклад swing. Ось що вийде в результаті, для заголовка h1:
Тепер заголовок буде програвати задану анімацію при завантаженні сторінки. Таким же способом поставимо анімацію і для інших елементів:
Ми додали класи animated для заголовка, і для кожної колонки тепер при завантаженні сторінки вони будуть відтворювати анімацію. Аналогічно можна додати анімацію до інших елементів сторінки. Але є невелика проблема, вся анімація відтворюватиметься під час завантаження сторінки. І при прокручуванні до елементів, які знаходяться за межами першого екрана, ми вже не побачимо анімацію, оскільки вона вже сталася, коли сторінку було завантажено. Щоб показувати анімацію лише тоді, коли елемент знаходиться у зоні видимості, потрібно підключити бібліотеку wow.js
Підключення бібліотека wow.js для анімації під час прокручування сторінки
Бібліотека wow.js була спеціально зроблена, щоб працювати в парі з бібліотекою animate.css. Працює вона так, що анімація елементів спрацьовує не при завантаженні сторінки, а тоді, коли ці елементи потрапляють у зону видимості, тоє при прокручуванні сторінки.
Для підключення бібліотеки я помістив файл wow.min.js у паgre /libs поряд зі сторінкою і підключаю його як звичайний js скрипт. Також після підключення цю бібліотеку необхідно ініціалізувати. Підключати wow.js слід після підключення jquery. Це обов'язкова умова.
Тепер, коли бібліотека підключена, переходимо до редагування коду. Для роботи wow.js для елементів, необхідно додати клас wow. До речі, ним можна замінити клас animated. Виходить так.
Змінивши на всіх елементах з анімацією animated на wow, ми побачимо, що тепер анімація елементів спрацьовує при прокручуванні сторінки, а не при завантаженні.
Також бібліотека wow.js містить додаткові опції. Подивитися їх можна у документації на сайті цієї бібліотеки. Наприклад, можна додати затримку в анімації. Задається вона html5 параметром data-wow-delay = "1s". Замість 1s можна вказати своє значення затримки. Я виставив затримку для елементів першого розділу так, що анімація кожного елемента почнеться після попереднього, і ось що вийшло: