[JS] 스크롤 애니메이션 구현 (Intersection Observer)

예시

 

 Intersection Observer API로 스크롤 애니메이션을 쉽게 구현할 수 있습니다.

 

Intersection Observer API

const options = {
  root: null,
  rootMargin: "0px",
  threshold: 1.0,
};

const observer = new IntersectionObserver((entries) => {
  // 관찰 중인 배열 형식의 객체 리스트
  entries.forEach((entry) => {
    ...
  });
}, options);
// target과 root가 교차되어 화면에 보이게 되었을 때 호출되는 함수 

const target = document.querySelector('div');
observer.observe(target);
// 새로 생성한 IntersectionObserver 객체의 observe 메서드는 적용할 타겟이 필요

Intersection Observer은 target과 root의 교차 발생을 비동기적으로 관찰하는 Web API입니다.

 

const options = {
    root: null,
    rootMargin: "0px",
    threshold: 1.0,
};

• root
  • 어떤 요소를 기준으로 target이 들어오고 나가는 것을 확인할지 지어 기본은 브라우저(viewport)
• rootMargin
  • root의 범위를 확장, 축소 할 수 있습니다.
• threshold
  • target과 root의 교차가 얼마나 일어나야 callback 함수를 실행할지 지정 (기본은 0, 0.0 -> target이 진입을 시작 , 1.0 -> target이 전부 들어 옴)

const observer = new IntersectionObserver((entries) => {
    // 관찰 중인 배열 형식의 객체 리스트
    entries.forEach((entry) => {
    	...
    });
}, options);

 

Callback

Intersection Observer은 target과 root가 교차되어 화면에 보이게 되었을 때 호출되는 함수로 아래의 정보를 callback의 파라미터로 받습니다.

• Entries
  • 관찰되고 있는 객체 리스트를 반환
• Observer
  • 콜백함수가 호출되는 IntersectionObserver의 참조객체

 

Entry Object

Entries 객체 리스트의 각 Entry 객체는 아래와 같이 구성되어 있습니다.

• boundingClientRect : target의 getBoundingClientRect() 메서드를 실행하면 나오는 값과 같은 정보를 반환
• intersectionRatio : target과 root가 교차되는 부분의 수치로 반환 (0.0과 1.0의 사이)
• intersectionRect : target과 root가 교차되는 정보를 반환
• isIntersecting : target과 root의 교차 상태를 true, false로 반환
• rootBounds : options에서 지정한 root의 정보를 반환 (기본값 viewport)
• target : 현재 객체의 target element 정보를 반환
• time : target과 root의 교차가 일어난 시간을 반환

 

예제 코드

단순히 Entry 객체의 isIntersecting 값으로 교차가 되었는지를 판단, 스크롤 애니메이션을 구현할 수 있습니다.

 

 

 

 

 

classList.remove 메서드를 사용하지 않을 시, 최초 실행 후 고정됩니다!

 

참고자료

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

IntersectionObserver - Web API | MDN

 

https://developer.mozilla.org/ko/docs/Web/API/IntersectionObserver/observe

IntersectionObserver.observe() - Web API | MDN