AOS: CSS бібліотека анімації прокручування сторінки

18

Від автора: стаття написана нашим сьогоднішнім гостем 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

Example Element

Приклад з великою тривалістю:

Example Element

**Порада:** Можна використовувати data-aos замість aos для проходження валідації HTML.

Демо

Різні анімації:

З якорями:

З якорями і різними функціями анімації:

Проста користувацька анімація:

Додаткові можливості

Якоря – анімуються елемент на основі позиції іншого елемента

Якірний розміщення – анімуються елемент на основі його положення на екрані. Анімувати елементи можна не тільки вони показуються на екрані, але, наприклад, коли нижня межа елемента проходить середину екрану.

Анімація в обидві сторони – За замовчуванням анімація працює як при скроле вниз, так і вгору. Однак можна спеціально прописати, щоб анімація спрацьовувала тільки в одному напрямку.

Просте відключення – Відключайте анімацію на мобільних пристроях за допомогою готових опцій mobile phone, tablet або з допомогою користувальницьких умов/функцій.

Асинхронність – Перерахунок позицією елементів DOM при його зміні. Після завантаження через AJAX вам ні про що не потрібно буде турбуватися.

Без залежностей – Бібліотека написана на чистому JS і повністю незалежна.