Від автора: стаття написана нашим сьогоднішнім гостем Michał Sajnóg, front-end розробником з сайту Netguru. Michał створив бібліотеку анімації під час прокручування сторінки. Найбільше в цій бібліотеці мені подобається те, що вона максимально перекладає створення анімації і контроль над нею на CSS. Що говорити, цю бібліотеку використовує безліч великих торгових майданчиків. Michał покаже, як треба працювати з бібліотекою.
Ви коли-небудь бачили такі довгі веб-сторінки, при прокрутці яких запускаються різні типи анімації? Я хочу поділитися з вами моїм плагіном, який серйозно полегшує роботу з будь-анімацією, а також по максимуму віддає роботу з анімацією CSS. Можете заглянути на GitHub.
Проблеми інших бібліотек
У моїй попередній компанії для анимирования елементів під час скрола ми використовували WOW.js (або щось подібне). З простими проектами проблем не виникало, але от для великих хотілося більшого контролю над подіями. У всіх популярних бібліотеках анімація оброблялася через JS шляхом вставки инлайнового CSS коду. Жах, инлайновые стилі! Їх вкрай складно контролювати, а переписати ще складніше. В деяких випадках можна задавати стилі через JS, але все ж краще зберігати стилі там, де їм місце, в окремому файлі.
Я вирішив створити бібліотеку, яка виконувала б одну задачу – визначала позицію елемента і привласнювала відповідні класи, коли ті з’являються в полі зору.
Повний контроль анімації в CSS
Я вирішив розбити завдання:
Вся логіка пішла в JavaScript
Вся анімація в CSS
Так ви зможете самостійно додавати свою анімацію, а також змінювати її залежно від розміру видимої області екрану.
Принцип роботи AOS
Ідея AOS вкрай проста: необхідно стежити за всіма елементами і їх становищем за переданим налаштувань. Потім додається або вилучається клас aos-animate. Звичайно, на практиці не завжди все так просто, але основний принцип такий. Анімація повністю обробляється на стороні CSS.
Приклади анімації в CSS
У бібліотеці є безліч готових варіантів анімації, однак створення нової анімації також не складе труднощів. Приклад:
[aos=”fade”] {
opacity: 0;
transition-property: opacity;
}
[aos=”fade”].aos-animate {
opacity: 1;
}
Думати про тривалості або затримці анімації зовсім не потрібно. Необхідно лише в CSS:
Додати стилі для атрибута aos з ім’ям вашої анімації
Задати властивість transition (за замовчуванням стоїть all, чим коротше буде анімація для обраних властивостей, тим вище продуктивність)
Додати властивості для стану після плавного переходу .aos-animate
Тривалість, затримка, функція анімації, все це задається окремо.
Приклад HTML
Приклад з великою тривалістю:
**Порада:** Можна використовувати data-aos замість aos для проходження валідації HTML.
Демо
Різні анімації:
З якорями:
З якорями і різними функціями анімації:
Проста користувацька анімація:
Додаткові можливості
Якоря – анімуються елемент на основі позиції іншого елемента
Якірний розміщення – анімуються елемент на основі його положення на екрані. Анімувати елементи можна не тільки вони показуються на екрані, але, наприклад, коли нижня межа елемента проходить середину екрану.
Анімація в обидві сторони – За замовчуванням анімація працює як при скроле вниз, так і вгору. Однак можна спеціально прописати, щоб анімація спрацьовувала тільки в одному напрямку.
Просте відключення – Відключайте анімацію на мобільних пристроях за допомогою готових опцій mobile phone, tablet або з допомогою користувальницьких умов/функцій.
Асинхронність – Перерахунок позицією елементів DOM при його зміні. Після завантаження через AJAX вам ні про що не потрібно буде турбуватися.
Без залежностей – Бібліотека написана на чистому JS і повністю незалежна.
