Клиенты обожают просить «сделайте, чтобы красиво выезжало при скролле». Реализовать анимацию при прокрутке страницы вручную через Intersection Observer и CSS-переходы — задача решаемая, но требующая времени и, как правило, нескольких часов отладки кросс-браузерных нюансов. AOS (Animate On Scroll) предлагает элегантный путь: подключите библиотеку, добавьте атрибут data-aos к нужным элементам — и они плавно оживают при прокрутке. Сверх одного вызова AOS.init() писать ничего не нужно.
В статье разбираем актуальную версию библиотеки — от базового подключения и всех типов анимаций до тонкой настройки, JavaScript-событий и API.
Подключение
AOS.js распространяется через CDN и пакетные менеджеры. Выберите вариант, удобный для вашего проекта.
CDN — быстрый старт
Подключите CSS в <head> и JS перед закрывающим </body> . После загрузки скрипта вызовите AOS.init() . Это всё — библиотека готова к работе:
<!-- В <head> -->
<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>Yarn / npm
Для проектов с Webpack, Vite или Rollup установите пакет и импортируйте в точке входа:
npm install --save aos@next
# или
yarn add aos@nextimport AOS from 'aos';
import 'aos/dist/aos.css';
AOS.init();Первая анимация
После инициализации добавьте к HTML-элементу атрибут data-aos с названием анимации — и анимация при прокрутке страницы заработает сама. AOS скроет элемент до появления в поле зрения и запустит переход в нужный момент. Ни строчки дополнительного JavaScript:
<div data-aos="fade-up">Появлюсь снизу</div>
<div data-aos="zoom-in">Появлюсь с увеличением</div>
<div data-aos="flip-left">Перевернусь при появлении</div>Прокрутите страницу вниз и убедитесь сами — блоки ниже анимированы через AOS.js:
Типы анимаций
AOS предлагает четыре группы эффектов для анимации при скролле. Все примеры ниже интерактивны — прокрутите страницу, чтобы запустить их. Если хочется посмотреть повторно — прокрутите вверх и снова вниз: анимации воспроизводятся при каждом появлении элемента в поле зрения.
Fade — плавное появление
Самая универсальная группа. Элемент плавно проявляется из прозрачности — опционально со смещением из одного из восьми направлений. Подходит для большинства блоков на странице:
Flip — переворот
Элемент переворачивается в одном из четырёх направлений. Хорошо смотрится для карточек и блоков с иконками. Главное — не злоупотреблять: один перевернувшийся элемент выглядит эффектно, двадцать — как аттракцион на ярмарке:
Slide — сдвиг
В отличие от fade, элемент полностью выдвигается из-за края области видимости. Хорошо работает для боковых блоков, горизонтальных списков и баннеров:
Zoom — масштабирование
Элемент появляется из уменьшенного состояния ( zoom-in ) или сжимается из увеличенного ( zoom-out ). Каждый вариант поддерживает направление — итого 10 комбинаций:
Настройка элементов
Каждый элемент можно настроить индивидуально через data-aos-* атрибуты — прямо в разметке, без дополнительного JavaScript.
Длительность — data-aos-duration
Время анимации в миллисекундах. Допустимые значения — от 50 до 3000 с шагом 50. По умолчанию — 400 мс. Слишком долго — пользователь заскучает. Слишком быстро — не заметит. Обычно 600–900 мс дают наилучший результат:
<div data-aos="fade-up" data-aos-duration="400">400 мс — по умолчанию</div>
<div data-aos="fade-up" data-aos-duration="800">800 мс</div>
<div data-aos="fade-up" data-aos-duration="1600">1600 мс — медленно</div>Задержка — data-aos-delay
Пауза перед стартом анимации (0–3000 мс). По умолчанию — 0 . Особенно полезно при анимировании группы однотипных элементов: небольшие задержки создают каскадный эффект появления и делают контент «живым»:
<div data-aos="fade-up" data-aos-delay="0">Карточка 1</div>
<div data-aos="fade-up" data-aos-delay="150">Карточка 2</div>
<div data-aos="fade-up" data-aos-delay="300">Карточка 3</div>Функция плавности — data-aos-easing
Аналог CSS animation-timing-function . AOS поддерживает стандартные CSS-значения и расширенный набор кривых:
- Стандартные: linear , ease , ease-in , ease-out , ease-in-out
- С пружинным эффектом: ease-in-back , ease-out-back , ease-in-out-back
- Синусоидальные: ease-in-sine , ease-out-sine , ease-in-out-sine
- Квадратичные / кубические / степенные: ease-in-quad , ease-out-cubic , ease-in-out-quart и другие
<div data-aos="fade-up" data-aos-easing="ease-out-back">ease-out-back</div>
<div data-aos="fade-up" data-aos-easing="ease-in-out-cubic">ease-in-out-cubic</div>
<div data-aos="fade-up" data-aos-easing="linear">linear</div>Смещение триггера — data-aos-offset
По умолчанию анимация запускается, когда верхний край элемента достигает нижнего края экрана плюс 120px отступ. Атрибут data-aos-offset изменяет этот отступ: положительное значение задерживает старт, отрицательное — запускает раньше:
<!-- Запустить раньше обычного — элемент ещё в нижней части экрана -->
<div data-aos="fade-up" data-aos-offset="0">...</div>
<!-- Запустить значительно позже — элемент почти у центра экрана -->
<div data-aos="fade-up" data-aos-offset="300">...</div>Один раз или при каждом скролле — data-aos-once
По умолчанию анимация воспроизводится каждый раз при появлении элемента в поле зрения. Атрибут data-aos-once="true" ограничивает анимацию одним воспроизведением:
<!-- Анимировать только при первом появлении -->
<div data-aos="fade-up" data-aos-once="true">...</div>
<!-- Повторять при каждом скролле (поведение по умолчанию) -->
<div data-aos="fade-up" data-aos-once="false">...</div>Совет: для большинства контентных сайтов лучше задать once: true глобально. Пользователь уже видел анимацию — незачем воспроизводить её при каждой прокрутке вверх.
Анимация при уходе — data-aos-mirror
Появившийся в актуальной версии параметр. При data-aos-mirror="true" элемент анимируется не только при появлении, но и при исчезновении с экрана при прокрутке вверх — уходит в обратной анимации. По умолчанию — false :
<div data-aos="fade-up" data-aos-mirror="true">
Плавно появляюсь при скролле вниз и ухожу при скролле вверх
</div>Позиция триггера — data-aos-anchor-placement
По умолчанию анимация запускается, когда верхний край элемента достигает нижнего края экрана ( top-bottom ). data-aos-anchor-placement меняет эту точку. Значение — комбинация из двух частей: позиция на элементе + позиция на экране:
- Позиции на элементе: top , center , bottom
- Позиции на экране: top , center , bottom
<!-- Центр элемента достигает центра экрана -->
<div data-aos="fade-up" data-aos-anchor-placement="center-center">...</div>
<!-- Низ элемента достигает центра экрана -->
<div data-aos="fade-up" data-aos-anchor-placement="bottom-center">...</div>
<!-- Верх элемента достигает верха экрана -->
<div data-aos="fade-up" data-aos-anchor-placement="top-top">...</div>Внешний триггер — data-aos-anchor
Иногда нужно запустить анимацию элемента в зависимости от позиции другого элемента. data-aos-anchor принимает CSS-селектор и использует позицию указанного элемента как триггер вместо собственной позиции:
<div id="trigger">Прокрутите до меня</div>
<!-- Анимируется, когда #trigger появится на экране, а не этот элемент -->
<div data-aos="fade-up" data-aos-anchor="#trigger">...</div>Глобальные настройки
Вместо дублирования атрибутов на каждом элементе задайте умолчания при инициализации. Атрибуты на конкретных элементах всегда имеют приоритет над глобальными настройками:
AOS.init({
// Анимировать только один раз при первом появлении
once: false,
// Длительность анимации по умолчанию (мс)
duration: 400,
// Задержка перед стартом (мс)
delay: 0,
// Функция плавности
easing: 'ease',
// Отступ от нижнего края экрана для запуска анимации (px)
offset: 120,
// Анимировать при уходе с экрана (прокрутка вверх)
mirror: false,
// Позиция триггера по умолчанию
anchorPlacement: 'top-bottom',
// Задержка debounce при resize окна (мс)
debounceDelay: 50,
// Задержка throttle при скролле (мс)
throttleDelay: 99,
});Отключение на мобильных устройствах
На медленных устройствах или при узких экранах анимации могут работать некорректно или мешать пользователю. AOS поддерживает удобное отключение по типу устройства или своему условию:
// Отключить на телефонах и планшетах
AOS.init({ disable: 'mobile' });
// Отключить только на телефонах
AOS.init({ disable: 'phone' });
// Отключить только на планшетах
AOS.init({ disable: 'tablet' });
// Своё условие: отключить при ширине экрана менее 768px
AOS.init({
disable: function () {
return window.innerWidth < 768;
}
});API и JavaScript-события
Методы API
AOS предоставляет три метода для управления библиотекой программно. Пригодятся при динамическом контенте, SPA и сложных взаимодействиях:
// Инициализация — вызывается один раз после загрузки DOM
AOS.init();
// Пересчитать позиции всех элементов с data-aos
// Вызывается автоматически при resize окна, но можно и вручную —
// например, после изменения layout или добавления новых блоков
AOS.refresh();
// Полный сброс: заново найти все data-aos элементы и пересчитать позиции
// Нужен когда элементы с data-aos добавились или удалились из DOM после init()
AOS.refreshHard();AOS.refreshHard() — особенно полезен в SPA-приложениях и при контенте, подгружаемом через AJAX. Если добавлять элементы с data-aos динамически и не вызывать refreshHard() — они никогда не заанимируются (библиотека просто о них не знает).
События на элементах
AOS генерирует DOM-события при анимации элементов. Это позволяет реагировать на появление и исчезновение конкретных блоков — запускать видео, загружать данные, менять состояние интерфейса:
// Срабатывает при появлении любого AOS-элемента
document.addEventListener('aos:in', ({ detail }) => {
console.log('Элемент появился:', detail);
});
// Срабатывает при исчезновении любого AOS-элемента
document.addEventListener('aos:out', ({ detail }) => {
console.log('Элемент ушёл:', detail);
});Для точечного отслеживания добавьте к элементу атрибут data-aos-id с уникальным идентификатором. AOS сгенерирует события специально для этого элемента:
<!-- Разметка -->
<div data-aos="fade-up" data-aos-id="hero">...</div>
<!-- JavaScript -->
document.addEventListener('aos:in:hero', ({ detail }) => {
// Блок hero появился на экране — запустить видео, анимацию счётчиков и т.д.
console.log('hero появился!', detail);
});
document.addEventListener('aos:out:hero', ({ detail }) => {
console.log('hero ушёл!', detail);
});AOS — удачный баланс между простотой и гибкостью. Один атрибут в разметке даёт работающую анимацию, а полный набор параметров позволяет добиться точного поведения для любого сценария. Главное помнить: анимация должна помогать пользователю воспринимать контент, а не превращать страницу в новогоднюю ёлку.
Если хочется пойти дальше и добавить глубину при скролле — загляните в подборку 10 потрясающих примеров параллакс скроллинга.
