AOS Простые анимации при скролле для любого сайта

AOS - Animate on scroll library

Представьте: пользователь листает ваш лендинг, и в этот момент элементы плавно появляются, переворачиваются, выезжают из-за края экрана. Это не магия, а библиотека AOS (Animate On Scroll), которая делает анимации при скролле простыми как никогда.

Зачем это нужно?

В современном вебе анимации — это не просто «красивости». Они:

Улучшают пользовательский опыт
Направляют внимание посетителя
Делают контент более запоминающимся

Но реализация таких анимаций часто превращается в головную боль. Вот тут-то и приходит на помощь AOS.

Что умеет AOS?

1. Мгновенное подключение

Добавить анимации можно буквально в три шага:

<!-- Подключаем стили -->
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

<!-- Сам скрипт перед закрывающим body -->
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>AOS.init();</script>

2. Богатая коллекция анимаций

Библиотека предлагает десятки готовых эффектов:

Fade (появление): fade, fade-up, fade-down и другие направления
Flip (переворот): flip-up, flip-left и т.д.
Slide (сдвиг): slide-up, slide-left и другие варианты
Zoom (увеличение): zoom-in, zoom-out с разными направлениями

Пример использования:

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

3. Точный контроль

Каждую анимацию можно тонко настроить:

<div 
  data-aos="fade-up"
  data-aos-delay="300"
  data-aos-duration="1000"
  data-aos-once="true"
></div>

Здесь:

delay — задержка перед анимацией (300ms)
duration — длительность анимации (1000ms)
once — анимация сработает только один раз

4. Гибкие триггеры

Вы можете привязать анимацию не к самому элементу, а к другому объекту на странице:

<div data-aos="fade-up" data-aos-anchor=".some-other-element"></div>

Почему разработчики любят AOS?

Нет зависимости от jQuery — работает на чистом JS
Маленький размер — всего ~4KB в минифицированном виде
Простота интеграции — работает даже с старыми браузерами (IE10+)
Гибкость — можно комбинировать с CSS-анимациями
Хорошая документация с живыми примерами на CodePen

Когда стоит использовать?

AOS идеально подходит для:

Лендингов и промо-страниц
Портфолио и презентаций
Одностраничных приложений (SPA)
Любых сайтов, где нужно добавить «оживления» без лишнего кода

Что в итоге?

AOS — это один из тех инструментов, который должен быть в арсенале фронтенд-разработчика. Когда в следующий раз вам понадобится добавить анимации при скролле, не изобретайте велосипед — попробуйте эту библиотеку. Буквально за 5 минут ваш сайт заиграет новыми красками!

🔗 Демо | Репозиторий