👁 Как отследить появление элемента на экране
IntersectionObserver сообщает, когда элемент входит в область видимости пользователя или покидает её.
Создаём наблюдатель:
const observer = new IntersectionObserver(([entry]) => {
entry.target.classList.toggle(
'visible',
entry.isIntersecting
);
});
Подключаем нужный элемент:
const card = document.querySelector('.card');

observer.observe(card);
Теперь можно запускать CSS-анимацию при появлении карточки:
.card {
opacity: 0;
transform: translateY(20px);
transition: 0.4s;
}

.card.visible {
opacity: 1;
transform: translateY(0);
}
Метод подходит для анимаций, ленивой загрузки контента и аналитики просмотров.

#javascript #frontend #вебразработка