반응형
Intersection Observer API
Intersection Observer API: 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰할 수 있게 한다.
예시
let observer = new IntersectionObserver((e) => {
e.forEach((el) => {
console.log(el.intersectionRatio); // 화면에 포함된 퍼센트
if (el.isIntersecting) {
console.log(el.intersectionRatio);
el.target.style.opacity = el.intersectionRatio;
} else {
el.target.style.opacity = 0;
}
});
});
let cards = document.querySelectorAll('.card');
observer.observe(cards[0]);
observer.observe(cards[1]);
observer.observe(cards[2]);
공식 문서
https://developer.mozilla.org/ko/docs/Web/API/Intersection_Observer_API
Intersection Observer API - Web API | MDN
Intersection Observer API는 타겟 요소와 상위 요소 또는 최상위 document 의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하는 방법입니다.
developer.mozilla.org
반응형
'웹_프론트엔드 > JavaScript' 카테고리의 다른 글
[자바스크립트] 이미지 URL을 File 또는 FileList로 변환하기 (0) | 2023.11.10 |
---|---|
[JS] 클로저란? (0) | 2023.07.25 |
[JS] 스코프(Scope)란? (0) | 2023.07.24 |
[JS] 연속된 정수 배열을 만드는 다양한 방법 (0) | 2023.07.14 |
자바스크립트 반복문 총 정리 (0) | 2022.10.14 |