AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации. Инструкция по установке и настройке 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"
>
<
AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.
Инструкция по установке и настройке 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>
Больше информации читайте в нашем телеграм канале @coderoll