ГлавнаяJavaScriptJS Библиотеки → AOS - плавная анимация при скролле
JS Библиотеки

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

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

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

4 комментария
  1. Аватар пользователя
    слива
    -1
    Выглядит хорошо, беру на заметку.
  2. Аватар пользователя
    слива
    +2
    Использовал в новом проекте, заказчик в восторге. Денежку получил)
  3. Аватар пользователя
    +3

    что насчёт производительности? Сильно нагружает?

    1. Аватар пользователя
      +1

      Не больше, чем ее аналоги

Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив