Как на JS реализовать «анимацию появления» (Intersection Observer), когда элементы плавно выплывают снизу при скролле?

Intersection Observer API — это современный браузерный инструмент, позволяющий отслеживать момент, когда элемент попадает в область видимости (viewport). Именно он идеально подходит для реализации анимации появления элементов при скролле без использования сторонних библиотек.

## Базовая реализация

**Шаг 1. Подготовьте HTML**

Добавьте класс к элементам, которые должны анимироваться:

html

**Шаг 2. Напишите CSS**

Сначала элементы скрыты и сдвинуты вниз. При добавлении класса `.visible` они плавно появляются:

css
.fade-in-block {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-block.visible {
opacity: 1;
transform: translateY(0);
}

**Шаг 3. Напишите JavaScript**

javascript
const elements = document.querySelectorAll(‘.fade-in-block’);

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add(‘visible’);
observer.unobserve(entry.target); // Отписываемся после срабатывания
}
});
}, {
threshold: 0.15 // Срабатывает, когда 15% элемента видно
});

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

## Разбор ключевых параметров

— **threshold** — число от 0 до 1, определяет, какая доля элемента должна быть видна для срабатывания. Значение `0.1` означает 10%.
— **rootMargin** — позволяет расширить или сузить зону срабатывания. Например, `’0px 0px -100px 0px’` сдвигает триггер на 100px выше нижнего края экрана.
— **root** — по умолчанию `null` (весь viewport). Можно указать конкретный контейнер.

## Задержка для каскадного эффекта

Чтобы элементы появлялись поочерёдно, добавьте задержку через data-атрибут:

html

javascript
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const delay = entry.target.dataset.delay || 0;
setTimeout(() => {
entry.target.classList.add(‘visible’);
}, delay);
observer.unobserve(entry.target);
}
});
}, { threshold: 0.15 });

## Советы по производительности

1. Всегда вызывайте `observer.unobserve()` после срабатывания, если повторная анимация не нужна — это освобождает ресурсы.
2. Используйте `will-change: transform, opacity` в CSS с осторожностью — только для активно анимируемых элементов.
3. Intersection Observer работает асинхронно и не блокирует основной поток, в отличие от `scroll`-событий.

Такой подход поддерживается всеми современными браузерами и является рекомендуемым способом реализации scroll-анимаций в 2024 году.