ГлавнаяJavaScript → AOS - плавная анимация при скролле
JavaScript

AOS - плавная анимация при скролле

AOS - плавная анимация при скролле
JavaScript
Подпишись на нас в телеграм @coderoll

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>
2 комментария
  1. Аватар пользователя
    слива
    0
    Выглядит хорошо, беру на заметку.
  2. Аватар пользователя
    слива
    +1
    Использовал в новом проекте, заказчик в восторге. Денежку получил)
Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив