자바스크립트 스크롤 애니메이션 넣기 - Intersection Observer API

Intersection Observer API

Intersection Observer API: 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰할 수 있게 한다.

 

예시

let observer = new IntersectionObserver((e) => {
    e.forEach((el) => {
        console.log(el.intersectionRatio); // 화면에 포함된 퍼센트

        if (el.isIntersecting) {
            console.log(el.intersectionRatio);
            el.target.style.opacity = el.intersectionRatio;
        } else {
            el.target.style.opacity = 0;
        }
    });
});
let cards = document.querySelectorAll('.card');
observer.observe(cards[0]);
observer.observe(cards[1]);
observer.observe(cards[2]);

 

공식 문서

https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API

Intersection Observer API - Web API | MDN