CodeRoll | Frontend

AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.



Инструкция по установке и настройке AOS

Рассмотрим на примере подключения через CDN



Шаг 1.

Подключить перед закрывающим тегом </head> CSS файл

<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">



Перед закрывающим тегом </body> подключить JS файл

<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>



Шаг 2.

Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить

<script>

AOS.init();

</script>



Шаг 3.

Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации

<div data-aos="fade-up-right"></div>



#JS #HTML_CSS