Intersection Observer

let observer = new IntersectionObserver((entries) => {
	# 요소 발견시 함수 실행 -> Call back 함수
	entries.forEach((entry) => {
    	# 요소가 화면에 진입했는지 확인
        if (entry.isIntersecting) {
            entry.target.style.opacity = 1;
        } else {
            entry.target.style.opacity = 0;
        }
    });
})

let div = document.querySelectorAll('div')
observer.observe(div[0])

 

let observer = new IntersectionObserver(callback, options);

 

브라우저 제공 API로

 

특정 요소들을 관찰 혹은 감시하여 Callback 함수를 실행시킬 수 있습니다.

 

다음 예제는 <div> 태그를 화면에서 진입하는 지 확인하여

 

target의 불투명도를 정하는 Script입니다.