먼저 글을 쓰기에 앞서,
IntersectionObserver API의 모든 것을 알지 못 하고 제가 사용한 부분만 쓰는 점 양해바랍니다.
오늘은 이름부터 길어서 어려워 보이는 IntersectionObserver API의 일부만 알아보자.
벌써 힘들다.
다름이 아니라 스크롤 효과에 대한 강의를 보는데
"왜 이걸 써야할까 스크롤 이벤트를 사용하면 안될까"
라고 생각했다.
내가 아는건 스크롤 이벤트 밖에 없었으니까.
일단, 스크롤 이벤트로 스크롤 효과를 구현하면,
스크롤 이벤트는 동기적으로 실행되어서이벤트가 연속으로 호출되거나, 렌더링 성능이 떨어지는 점 등의 문제가 있다.
IntersectionObserver 함수는 대상 요소의 가시성에 대한 변경 사항을 관찰합니다.
대상 요소를 매개변수로 하는 observe() 메서드가 호출되는 즉시 대상 요소 관찰을 시작합니다.
IntersectionObserver 인터페이스는 대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단을 제공합니다.
Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.
역사적으로 요소의 가시성이나 두 요소의 상대적인 가시성을 탐지하는 것은 어려운 일이었습니다. 일반적으로 알려진 해결방법은 신뢰성이 부족하고 브라우저나 사이트에 부하를 주기때문에 좋지 못한 사용자 경험을 낳습니다. 웹이 성숙함에따라 이러한 정보의 필요성은 커졌습니다. intersection 정보는 아래와 같은 여러가지 이유 때문에 필요합니다:
- 페이지가 스크롤 되는 도중에 발생하는 이미지나 다른 컨텐츠의 지연 로딩.
- 스크롤 시에, 더 많은 컨텐츠가 로드 및 렌더링되어 사용자가 페이지를 이동하지 않아도 되게 하는 infinite-scroll 을 구현.
- 광고 수익을 계산하기 위한 용도로 광고의 가시성 보고.
- 사용자에게 결과가 표시되는 여부에 따라 작업이나 애니메이션을 수행할 지 여부를 결정.
*참고자료: MDN Web Docs - IntersectionObserver
먼저 html 작성을 해줍니다.
<div>
<h1>apple</h1>
</div>
<div>
<h1>banana</h1>
</div>
<div>
<h1>melon</h1>
</div>
<div>
<h1>orange</h1>
</div>
<div>
<h1>mango</h1>
</div>
5개의 div요소에 각각 h1요소를 넣었습니다.
div {
width: 200px;
height: 200px;
border: 4px solid;
position: relative;
display:flex;
justify-content: center;
align-items: center;
}
h1 {
display:flex;
position: absolute;
border: 4px solid red;
opacity: 0;
transition: 2s;
width: 150px;
height: 150px;
justify-content: center;
align-items: center;
}
h1.show {
opacity: 1;
}그리고 css를 통해서 각 div요소들을 구분합니다.
스크롤 효과를 확인하기 위해 h1에 opacity값을 0으로 줘서 보이지 않게 하고,
transiton값도 2초로 합니다.
그리고 h1에 show라는 클래스가 있으면
opacity값이 1이 됩니다.
const io = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
entry.target.classList.add ('show');
} else {
entry.target.classList.remove('show');
}
})
});
const h1 = document.querySelectorAll('h1');
h1.forEach(function (el) {
io.observe(el);
});
h1태그를 찾아서, io라는 객체에 observe라는 메소드를 실행해서 하나씩 들어간다.
(h1태그가 5개니깐 5번)
IntersectionObserver가 관찰하는 대상은 총 5개가 된다.
5개의 요소의 화면의 교차 정보가 배열로 entries에 들어간다.
(entries는 5개의 배열을 가짐.)
forEach메서드를 반복해서 각각 화면의 정보를 entry로 받아와서
if 조건문을 통해 entry의 isIntersecting값이 true이면,
entry의 target에 show라는 클래스를 추가하고,
false이면 show라는 클래스를 제거한다.
See the Pen Untitled by BearHumanS (@BearHumanS) on CodePen.
코드펜의 결과물을 보면 스크롤을 올리고 내릴 때 마다 뷰포트에 교차되는 h1태그가 사라졌다가 나타났다가 한다.
스크롤 효과를 사용하기 위해 IntersectionObserver를 활용한 예시입니다.
추가로 IntersectionObserver의 속성과 다른 메서드는 추후에 따로 정리하겠습니다.
쓰고도 어렵다~
사용 할 줄 아는 것과 이해 하는 건 어마어마한 차이가 있다.
스마트폰을 사용 할 줄 알지만, 그 안에 동작 원리를 이해 못하는거 처럼..
댓글