AOS - плавная анимация при скролле
Что такое AOS?
AOS JS - это библиотека jаvascript для создания анимаций при прокрутке страницы (scroll animations). "AOS" расшифровывается как "Animate On Scroll" или "Анимация при прокрутке". Эта библиотека позволяет добавлять различные анимации к элементам страницы, которые активируются при прокрутке страницы пользователем.
Преимущества использования AOS JS:
- Простота в использовании: AOS предоставляет простой API для добавления анимаций к элементам на странице.
- Анимация при прокрутке: Это позволяет создавать более интерактивный и привлекательный пользовательский опыт.
- Поддержка различных типов анимаций: AOS поддерживает различные типы анимаций, такие как появление, исчезновение, затухание и т. д.
- Пользовательская настройка: Вы можете настроить параметры анимации, такие как продолжительность, задержка и смещение.
Чтобы использовать AOS JS на вашем веб-сайте, вам нужно подключить библиотеку к вашему проекту и добавить соответствующие атрибуты к HTML-элементам, которые вы хотите анимировать при прокрутке.
Как подключить AOS на сайт:
Рассмотрим на примере подключения через CDN
Шаг 1.
Подключить перед закрывающим тегом </head> CSS файл
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">Перед закрывающим тегом </body> подключить JS файл
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>Шаг 2.
Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить
<script>
AOS.init();
</script>Шаг 3.
Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации
<div data-aos="fade-up-right"></div>Прочие настройки
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor-placement="top-center"
>
</div>AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.