Настройка анимаций, связанных с прокруткой
Запускайте анимации CSS, когда элементы появляются в области просмотра
«Настройка анимаций, связанных с прокруткой» — бесплатный урок HTML Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения HTML Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс HTML Academy содержит 4 уроков всего.
Цель
Анимации, связанные с прокруткой, запускаются, приостанавливаются или воспроизводятся в обратном направлении в зависимости от видимости элемента. Примеры: плавное появление главного блока при прокрутке секции в область просмотра, счётчик, увеличивающий значение при появлении на экране, параллакс-эффект, связанный с положением прокрутки. IntersectionObserver запускает анимации, а CSS или API веб-анимаций выполняет их.
Анимации на основе триггеров
Самый простой шаблон: когда элемент входит в область просмотра, добавьте CSS-класс, содержащий анимацию. В callback наблюдателя используется entry.target.classList.add("in-view"); этот класс задаёт animation: fade-in 600ms forwards.
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}Настройка наблюдателя
Создайте общего наблюдателя, начните наблюдать за каждым элементом с классом-триггером, добавляйте «in-view» при пересечении и прекращайте наблюдение с помощью unobserve, чтобы избежать повторного запуска. Для одноразовых анимаций этого достаточно; чтобы повторять анимацию при повторном входе, не используйте unobserve и удаляйте класс при выходе.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));Эффекты каскадного появления
Чтобы элементы списка появлялись последовательно, задайте задержку для каждого элемента с помощью пользовательского свойства CSS: style="--delay: ${i * 100}ms" для каждого элемента; анимация считывает значение animation-delay: var(--delay). Элементы появляются каскадом, когда список входит в область просмотра.
Порог для более раннего запуска
threshold: 0.2 срабатывает, когда видны 20% элемента — обычно это подходящий момент для анимаций «in-view». threshold: 0 срабатывает слишком рано, уже при появлении любого пикселя, и выглядит резко; threshold: 1 срабатывает слишком поздно, когда элемент виден полностью, из-за чего возникает ощущение задержки.
Связанные с прокруткой и запускаемые прокруткой
Анимации, запускаемые прокруткой, воспроизводятся один раз при пересечении, как описано выше. Анимации, связанные с прокруткой, изменяют свой прогресс синхронно с положением прокрутки. Современный подход — анимации CSS, управляемые прокруткой (animation-timeline: scroll()); IntersectionObserver при этом по-прежнему полезен для отслеживания входа в зоны запуска и выхода из них.
Избегайте лишних перерасчётов макета
Анимируйте свойства, которые GPU может эффективно преобразовывать: преобразование и непрозрачность. Не анимируйте верхний и левый отступы, ширину и высоту — они запускают перерасчёт макета на каждом кадре, из-за чего анимации, связанные с прокруткой, прерываются на устройствах средней производительности.
Учитывайте уменьшение движения
Заключайте объявления анимации в @media (prefers-reduced-motion: no-preference), чтобы пользователи, запросившие уменьшение движения (например, из-за вестибулярных нарушений или повышенной чувствительности), видели статическое конечное состояние без движения. При уменьшенном движении декоративные анимации следует полностью отключать.
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}Шаблон производительности
Используйте одного общего наблюдателя, а не отдельного для каждого элемента. После запуска одноразовой анимации используйте unobserve. Применяйте will-change умеренно — только к элементам, которые анимируются в данный момент, и удаляйте это свойство после завершения анимации. Следите за пропущенными кадрами на панели производительности.
Двунаправленные анимации
Если анимация должна воспроизводиться в обратном направлении, когда элемент покидает область просмотра, не прекращайте наблюдение. В callback переключайте класс в зависимости от isIntersecting: entry.target.classList.toggle("in-view", entry.isIntersecting). При входе анимация воспроизводится вперёд, а при выходе — в обратном направлении.
Сочетание с API веб-анимаций
Для анимаций, управляемых JS, замените classList.add на entry.target.animate(keyframes, options). WAAPI возвращает объект анимации, который можно приостановить, воспроизвести в обратном направлении или объединить в цепочку с помощью обещаний — это гибче, чем CSS, при создании сложных последовательностей.
Проверка знаний
Почему в анимациях, связанных с прокруткой, предпочтительнее анимировать преобразование и непрозрачность, а не верхний и левый отступы, ширину и высоту?
Итоги
Анимации, связанные с прокруткой, сочетают IntersectionObserver с классами анимации CSS или WAAPI. Задайте скрытое состояние, добавляйте «in-view» при пересечении, анимируйте преобразование и непрозрачность, а не верхний и левый отступы, учитывайте prefers-reduced-motion и задавайте каскадное появление через пользовательские свойства CSS. Для полной анимации прогресса прокрутки рассмотрите встроенные анимации, управляемые прокруткой (animation-timeline: scroll()).
Часто задаваемые вопросы
Урок «Настройка анимаций, связанных с прокруткой» бесплатный?
Да — полный текст урока «Настройка анимаций, связанных с прокруткой» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс HTML Academy, подпишись на CoddyKit PRO. Курс HTML Academy содержит 4 уроков всего.
Чему я научусь в уроке «Настройка анимаций, связанных с прокруткой»?
Запускайте анимации CSS, когда элементы появляются в области просмотра Ты практикуешь HTML Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать HTML Academy?
Предыдущий опыт не требуется. HTML Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Настройка анимаций, связанных с прокруткой»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке HTML Academy?
Да. Каждый урок HTML Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- API IntersectionObserver и пороговые значения
- Отложенная загрузка с IntersectionObserver
- Реализация бесконечной прокрутки
- Настройка анимаций, связанных с прокруткой