Учебник AOS (Animate on Scroll)

Введение
- Что такое AOS и зачем она нужна
- История создания библиотеки
- Основные возможности и ограничения
- Сравнение с альтернативными решениями
Установка и подключение
- Установка через npm
- Установка через yarn
- Подключение через CDN
- Загрузка и использование локальных файлов
- Структура файлов библиотеки
- Проверка корректности подключения
- Решение типовых проблем при установке
Базовая настройка
- Инициализация библиотеки
- Минимальный рабочий пример
- Понимание атрибута data-aos
- Параметры инициализации
- Момент инициализации в жизненном цикле страницы
- Реинициализация при динамическом контенте
- Отключение анимаций на мобильных устройствах
Типы анимаций
- Анимации появления fade
- Анимации движения slide
- Анимации увеличения zoom
- Анимации переворота flip
- Комбинированные анимации
- Создание плавных переходов между анимациями
Управление длительностью и задержкой
- Атрибут data-aos-duration
- Атрибут data-aos-delay
- Глобальные настройки времени
- Индивидуальные настройки для элементов
- Расчет оптимальной длительности
- Каскадные задержки для групп элементов
- Синхронизация анимаций
Настройка триггеров
- Параметр offset
- Параметр anchorPlacement
- Понимание точек срабатывания
- Настройка для разных размеров экрана
- Якорные элементы
- Отладка триггеров
Функции плавности
- Стандартные easing-функции
- Линейная анимация
- Ease-in, ease-out, ease-in-out
- Кубические кривые Безье
- Создание собственных функций плавности
- Выбор подходящего easing для разных типов анимации
Продвинутые параметры
- Параметр once
- Параметр mirror
- Параметр disable
- Условное отключение анимаций
- Использование disable с медиазапросами
- Throttle и debounce настройки
- Параметр startEvent
События и коллбэки
- Событие aos:in
- Событие aos:out
- Глобальные обработчики событий
- Индивидуальные обработчики для элементов
- Практическое применение событий
- Цепочки действий через события
Методы API
- Метод init
- Метод refresh
- Метод refreshHard
- Когда использовать refresh и refreshHard
- Автоматическое обновление при изменении DOM
- Управление жизненным циклом анимаций
Работа с одностраничными приложениями
- Интеграция с React
- Интеграция с Vue
- Интеграция с Angular
- Особенности работы с виртуальным DOM
- Обновление анимаций при смене роутов
- Оптимизация производительности в SPA
Адаптивность и медиазапросы
- Отключение на мобильных устройствах
- Параметр disableMutationObserver
- Настройка breakpoint для disable
- Разные анимации для разных устройств
- Производительность на слабых устройствах
- Тестирование на различных экранах
Производительность и оптимизация
- Как AOS влияет на производительность
- Оптимизация количества анимированных элементов
- Использование will-change
- Аппаратное ускорение анимаций
- Профилирование производительности
- Ленивая загрузка и AOS
- Критические метрики производительности
Доступность
- Влияние анимаций на доступность
- Директива prefers-reduced-motion
- Отключение анимаций для пользователей с ограничениями
- Семантика и анимации
- Клавиатурная навигация
- Скринридеры и анимированный контент
Кастомизация через CSS
- Структура CSS-классов AOS
- Переопределение стандартных стилей
- Создание собственных анимаций
- Именование и организация кастомных классов
- Использование CSS-переменных
- Префиксы и специфичность
Создание собственных анимаций
- Структура кастомной анимации
- Регистрация новой анимации
- Keyframes и transform
- Opacity и другие свойства
- Тестирование собственных анимаций
- Библиотека переиспользуемых анимаций
Отладка и устранение проблем
- Анимации не запускаются
- Анимации запускаются некорректно
- Проблемы с z-index
- Конфликты с другими библиотеками
- Проблемы производительности
- Частые ошибки и их решения
Интеграция с другими библиотеками
- Работа с jQuery
- Совместимость с GSAP
- Использование с ScrollMagic
- Комбинирование с Intersection Observer API
- Конфликты и их разрешение
- Выбор между AOS и альтернативами
Серверный рендеринг
- Особенности SSR и анимаций
- Инициализация на клиенте
- Next.js и AOS
- Nuxt.js и AOS
- Предотвращение мерцания контента
Тестирование
- Unit-тестирование компонентов с AOS
- E2E-тестирование анимаций
- Моки и стабы для AOS
- Тестирование в разных браузерах
- CI/CD и анимации
Миграция и обновление
- Обновление версий AOS
- Breaking changes между версиями
- Миграция с других библиотек
- Обратная совместимость
- Стратегии постепенной миграции
Практические паттерны
- Анимация при скролле списков
- Последовательная анимация карточек
- Анимация появления секций
- Параллакс-эффекты с AOS
- Анимация навигации
- Анимированные формы
- Галереи и слайдеры
- Hero-секции с анимацией
Частые сценарии использования
- Портфолио и визитки
- Интернет-магазины
Лучшие практики
- Когда использовать AOS
- Когда не стоит использовать анимации
- Принципы хорошей анимации
- Баланс между эффектностью и юзабилити
- Производительность vs эффектность
- Прогрессивное улучшение
Альтернативные подходы
- Intersection Observer без библиотек
- CSS-анимации и scroll-timeline
- Когда писать собственное решение
- Сравнение производительности подходов