JavaScript Academy · Урок

Анимации при прокрутке

Анимируйте элементы при появлении в области просмотра.

«Анимации при прокрутке» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Анимация при прокрутке

Популярный эффект — плавное появление или выдвижение элементов в область просмотра по мере прокрутки пользователя. Наблюдение за пересечениями упрощает эту задачу: добавьте CSS-класс, когда элемент входит в область просмотра, а анимацию поручите CSS.

Сторона CSS

Определите в CSS скрытое начальное состояние и видимое конечное состояние. JavaScript лишь переключает класс, а переход выполняется средствами CSS, что обеспечивает плавность.

// .reveal { opacity: 0; transform: translateY(20px);
//   transition: opacity 0.6s, transform 0.6s; }
// .reveal.visible { opacity: 1; transform: none; }

Выбор целей

Пометьте элементы, которые хотите анимировать, общим классом, а затем соберите их.

const items = document.querySelectorAll('.reveal');
console.log('animating', items.length, 'elements');

Создание observer

Используйте threshold, чтобы анимация начиналась, когда видна значимая часть элемента, а не всего один пиксель.

const observer = new IntersectionObserver(reveal, {
  threshold: 0.2 // 20% visible
});

Добавление класса

В функции обратного вызова добавьте класс visible к пересекающимся целям. Затем CSS анимирует их появление в области просмотра.

function reveal(entries) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}

Одноразовая анимация

Для одноразового появления прекратите наблюдение за элементом после добавления класса, чтобы он не запускал анимацию снова при уходе из области просмотра и возвращении обратно.

function reveal(entries, obs) {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      obs.unobserve(entry.target); // animate only once
    }
  });
}

Повторная анимация в обоих направлениях

Если нужно, чтобы элементы анимировались и при исчезновении, переключайте класс в зависимости от isIntersecting и продолжайте наблюдение.

function reveal(entries) {
  entries.forEach(entry => {
    entry.target.classList.toggle('visible', entry.isIntersecting);
  });
}

Начало наблюдения

Начните наблюдать за каждой целью, чтобы отслеживать её. По мере прокрутки пользователя мимо каждой цели observer будет вызывать функцию обратного вызова.

items.forEach(el => observer.observe(el));

Последовательная анимация

Создайте каскад, задавая постепенно увеличивающуюся задержку перехода. Её можно установить из атрибута данных или по индексу элемента.

items.forEach((el, i) => {
  el.style.transitionDelay = (i * 100) + 'ms';
  observer.observe(el);
});

Учёт уменьшенной анимации

Некоторые пользователи предпочитают уменьшенное движение. Проверьте медиазапрос и пропустите анимации для таких пользователей, сразу отображая содержимое.

const reduce = window.matchMedia(
  '(prefers-reduced-motion: reduce)'
).matches;
if (reduce) {
  items.forEach(el => el.classList.add('visible'));
}

Преимущества для производительности

Поскольку основная работа выполняется переходами CSS, а определение видимости передано браузеру, анимации при прокрутке остаются плавными даже при большом количестве элементов. Никаких вычислений в событиях прокрутки и рывков.

Быстрая проверка

Проверьте, насколько хорошо вы поняли анимации, запускаемые прокруткой.

Повторение

Вы реализовали анимации, запускаемые прокруткой:

Определяйте скрытое и видимое состояния в CSS.
Наблюдайте за целями с подходящим значением threshold.
Переключайте класс при пересечении, а анимацию поручайте CSS.
Используйте unobserve для одноразовых появлений.
Учитывайте настройку prefers-reduced-motion.

Вы завершили изучение наблюдения за пересечениями. Далее — веб-воркеры.

Часто задаваемые вопросы

Урок «Анимации при прокрутке» бесплатный?

Да — полный текст урока «Анимации при прокрутке» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Анимации при прокрутке»?

Анимируйте элементы при появлении в области просмотра. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Анимации при прокрутке»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy