HTML의 특정 위치에서 Javascript 코드 실행하기

웹페이지의 특정 위치(섹션)에 왔을 때 애니메이션 실행하는 방법

Javascript의 IntersectionObserver 기능을 사용하면 된다. IntersectionObserver는 요소가 뷰포트에 포함되는지 여부를 구별하는 기능을 제공한다. 이 기능은 비동기적으로 실행되어 scroll과 같은 렌더링 성능이슈 또는 이벤트 연속호출과 같은 문제 없이 사용할 수 있다.

아래의 함수는 특정 element가 보일 때 callback 함수를 실행하는 함수이다.

function onVisible(element, callback) {
  new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if(entry.intersectionRatio > 0) {
        callback(element);
        observer.disconnect();
      }
    });
  }).observe(element);
  if(!callback) return new Promise(r => callback=r);
}

아래와 같이 활용할 수 있다.

onVisible(document.querySelector("#section1"), () => {
	console.log("it's visible!")
});

참고: https://stackoverflow.com/questions/1462138/event-listener-for-when-element-becomes-visible