Учебник ScrollMagic

Введение
- Что такое ScrollMagic
- История и развитие библиотеки
- Преимущества и ограничения
- Сравнение с альтернативными решениями
Установка и настройка
- Подключение через CDN
- Установка через npm
- Установка через yarn
- Подключение к проекту
- Проверка корректности установки
- Зависимости и совместимость
- Настройка окружения разработки
Основные концепции
- Архитектура библиотеки
- Контроллеры и их роль
- Сцены как основные элементы
- Жизненный цикл сцены
- События и коллбэки
- Система координат и позиционирование
Контроллеры
- Создание контроллера
- Параметры инициализации
- Глобальный и локальный контроллеры
- Управление контроллером
- Привязка к элементам
- Вертикальный и горизонтальный скролл
- Уничтожение контроллера
Сцены
- Создание базовой сцены
- Конфигурация сцены
- Добавление сцены к контроллеру
- Удаление сцены
- Активация и деактивация
- Цепочки методов
- Группировка сцен
Триггеры и позиционирование
- Параметр triggerElement
- Параметр triggerHook
- Смещение триггера через offset
- Расчет позиций триггеров
- Динамическое изменение триггеров
- Отладка триггеров
- Типичные ошибки позиционирования
Длительность и продолжительность
- Параметр duration
- Фиксированная длительность
- Динамическая длительность
- Длительность относительно viewport
- Длительность относительно элемента
- Бесконечная длительность
- Расчет длительности
События сцены
- Событие enter
- Событие leave
- Событие start
- Событие end
- Событие progress
- Событие update
- Параметры событий
- Порядок срабатывания событий
- Управление подписками
Индикаторы и отладка
- Подключение плагина indicators
- Визуализация триггеров
- Визуализация длительности
- Настройка внешнего вида индикаторов
- Цветовая маркировка
- Имена индикаторов
- Удаление индикаторов в продакшене
Прогресс и состояния
- Отслеживание прогресса сцены
- Метод progress
- Нормализация значений
- Использование прогресса для анимаций
- Обратный прогресс
- Состояние сцены
- Проверка активности сцены
Пиннинг элементов
- Концепция закрепления
- Метод setPin
- Параметры пиннинга
- pushFollowers
- spacerClass
- Закрепление на время сцены
- Управление z-index
- Освобождение закрепленных элементов
Интеграция с GSAP
- Подключение GreenSock
- Плагин animation.gsap
- Создание твинов
- Привязка анимации к сцене
- Метод setTween
- Временная шкала и ScrollMagic
Базовые анимации через GSAP
- Анимация opacity
- Анимация transform
- Анимация положения элементов
- Анимация масштаба
- Анимация поворота
- Комбинированные анимации
- Параметры ease
Продвинутые анимации
- Использование Timeline
- Последовательные анимации
- Параллельные анимации
- Stagger-эффекты
- Сложные траектории движения
- Морфинг и трансформации
- Работа с SVG
Классы и состояния
- Метод setClassToggle
- Добавление классов
- Удаление классов
- Переключение классов
- Множественные классы
- Интеграция с CSS
- Производительность при работе с классами
Управление направлением скролла
- Определение направления
- Параметр reverse
- Различные анимации для разных направлений
- Реакция на скролл вверх и вниз
- Состояние направления в событиях
- Оптимизация для обоих направлений
Адаптивность и viewport
- Пересчет при изменении размеров окна
- Метод refresh
- Автоматическое обновление
- Контрольные точки для разных экранов
- Медиа-запросы и ScrollMagic
- Условная активация сцен
- Производительность при resize
Множественные сцены
- Создание серии сцен
- Управление массивами сцен
- Цепочки сцен
- Зависимые сцены
- Синхронизация нескольких сцен
- Производительность при большом количестве
- Паттерны организации кода
Горизонтальный скролл
- Настройка горизонтального контроллера
- Особенности горизонтальной прокрутки
- Триггеры при горизонтальном скролле
- Комбинация вертикального и горизонтального
- Пиннинг в горизонтальном режиме
- Навигация по горизонтали
Параллакс-эффекты
- Принципы параллакса
- Скорость движения слоев
- Многослойный параллакс
- Параллакс фона
- Параллакс элементов
- Оптимизация параллакса
- Управление глубиной
Разделы на полный экран
- Создание fullpage-эффекта
- Snap-эффект между секциями
- Пиннинг секций
- Навигация между разделами
- Индикаторы прогресса
- Клавиатурное управление
- Адаптивность fullpage
Навигация и меню
- Активация пунктов меню при скролле
- Якорная навигация
- Плавная прокрутка к якорям
- Фиксированное меню
- Подсветка активного раздела
- Прогресс-бары
- Миникарта страницы
Производительность
- Оптимизация количества сцен
- Throttle и debounce
- Использование will-change
- GPU-ускорение
- Ленивая загрузка сцен
- Профилирование производительности
- Минимизация reflow и repaint
Работа с видео
- Синхронизация воспроизведения со скроллом
- Покадровая перемотка
- Автовоспроизведение при входе в сцену
- Остановка видео
- Контроль громкости
- Оверлеи для видео
- Оптимизация видеоконтента
Изображения и галереи
- Последовательное появление изображений
- Эффекты перехода между картинками
- Zoom-эффекты
- Слайдшоу на скролле
- Ленивая загрузка изображений
- Прелоадинг
- Адаптивные изображения
Текстовые эффекты
- Построчное появление текста
- Посимвольная анимация
- Split-текст
- Выделение текста при скролле
- Эффект пишущей машинки
- Затухание и появление абзацев
- Типографические эффекты
SVG-анимации
- Анимация path
- Stroke-эффекты
- Рисование линий
- Морфинг SVG
- Заливка и обводка
- Анимация графиков
- Интерактивные иллюстрации
Canvas и ScrollMagic
- Интеграция с canvas
- Покадровая прорисовка
- Последовательности изображений
- Процедурная анимация
- WebGL-эффекты
- Производительность canvas
- Ретина-дисплеи
Формы и взаимодействие
- Появление полей формы
- Валидация при скролле
- Прогресс заполнения
- Многошаговые формы
- Управление фокусом
- Сабмит при достижении конца
- UX-паттерны
Загрузка контента
- AJAX-загрузка при скролле
- Бесконечный скролл
- Пагинация на скролле
- Индикаторы загрузки
- Обработка ошибок
- Кеширование
- SEO-аспекты
Мобильные устройства
- Особенности touch-событий
- Производительность на мобильных
- Адаптация анимаций
- Отключение эффектов на слабых устройствах
- Жесты и свайпы
- Orientation change
- Viewport на мобильных
Доступность
- ARIA-атрибуты
- Клавиатурная навигация
- Screen reader совместимость
- Reduced motion
- Фокус-менеджмент
- Семантическая разметка
- Альтернативы для пользователей без JavaScript
Отладка и тестирование
- Инструменты разработчика
- Логирование событий
- Визуальная отладка
- Проверка триггеров
- Тестирование на разных устройствах
- Частые проблемы и решения
Миграция и обновления
- Переход с предыдущих версий
- Изменения в API
- Deprecated-методы
- Обратная совместимость
- Рефакторинг существующего кода
- Альтернативы ScrollMagic
- Стратегии миграции
Интеграция с фреймворками
- Использование в React
- Использование в Vue
- Использование в Angular
- Хуки жизненного цикла
- Реактивность и обновления
- SSR и ScrollMagic
- Управление состоянием
Продвинутые техники
- Кастомные easing-функции
- Физические симуляции
- Морфинг сложных форм
- Процедурная генерация анимаций
- Шейдеры и эффекты
- Particle-системы
- Алгоритмическая анимация
Расширение функциональности
- Создание собственных плагинов
- Кастомные методы
- Обертки и утилиты
- Переиспользуемые компоненты
- Библиотеки поверх ScrollMagic
- API расширений
- Публикация плагинов
Оптимизация и сборка
- Минификация кода
- Tree shaking
- Code splitting
- Lazy loading модулей
- Webpack-конфигурация
- Production build
Безопасность
- XSS при динамическом контенте
- Безопасные зависимости
- Обновление библиотек
- Best practices