JavaScript - 스크롤 애니메이션

new IntersectionObserver() JavaScript의 기본 기능 비동기적으로 실행되기 때문에 렌더링 성능이나 이벤트 연속 호출같은 문제 없이 사용할 수 있다. HTML요소가 현재 보이는지 안보이는지 검사해볼 수 있다. <div>가 현재 화면에 보이는지 파악이 쉬워진다. 두 개의 인수를 가진다. 첫 번째 인자로 콜백 함수를 받는다. 감시중인 요소가 화면에 등장 & 퇴장하면 콜백함수가 실행된다. 요소.isIntersecting 화면에 요소가 보일 때 true 안보일 때 false 요소.isIntersectionRatio 화면에 요소가 몇 % 만큼 등장했는지 알려준다. 콜백함수는 2개의 인수(entries, observer)를 가진다. entries는 인스턴스의 배열이다. observer는 콜백함수가 실행되는 해당 인스턴스를 참조한다.4 두 번째 인자로 options를 가진다. Methods observe() 대상 요소의 관찰을 시작한다. unobserve() 대상 요소의...

원문링크 : JavaScript - 스크롤 애니메이션