728x90
반응형
웹페이지에 스크롤시 동작하는 애니메이션을 scroll event를 사용하지 않고 구현해보려고 합니다!!
오늘의 주인공은 new IntersectionObserver() 입니다.
new IntersectionObserver()
Intersection observer는 요소가 뷰포트에 보이는지 구별하는 기능을 합니다.
이를 이용하여 스크롤시 요소가 뷰포트에 보이게 되었을 때 애니메이션이 실행되게 하면 되겠습니다!
Intersection observer 비동기적으로 실행되기 때문에,
렌더링 성능이나 이벤트 연속 호출 같은 문제 없이 사용할 수 있고,
또한 브라우저별 오차를 걱정하지 않아도 되기 때문에 아주 유용합니다.
그럼 이제 예시를 볼까요?
● new IntersectionObserver() 의 4가지 메소드
- observe() : 요소를 관찰한다.
- unobserve() : 요소의 관찰을 중지한다. 단, IntersectionObserver가 관찰하고 있는 대상 요소를 인수로 지정해야 한다.
- disconnect() : IntersectionObserver가 관찰하고 있는 모든 요소의 관찰을 중지한다.
- takeRecords() : IntersectionObserverEntry 객체의 배열을 반환한다.(일반적인 상황에서 잘 사용하지 않는다고 합니다^^;;)
scroll event를 사용하기 힘든 상황에서 좋은 대안책이 될 IntersectionObserver!
다양하게 활용 가능 할 거 같습니다.
글 읽어주셔서 감사합니다!
728x90
'Javascript' 카테고리의 다른 글
| [Javascript] 버튼 클릭 한번으로 모든 체크 박스 체크 해제하기 (4) | 2023.03.07 |
|---|---|
| [Javascript] 특정 영역을 제외한 곳 클릭시 이벤트 실행하기 (feat. e.target) (0) | 2023.03.06 |
| [javascript] PIP기능을 구현해보자!(쉬움주의) (4) | 2023.02.22 |
| [javascript] 요소 클릭 시 텍스트 input value값으로 넣기(예시 : 배송시 요청 사항을 선택해주세요.) (0) | 2023.02.09 |
| [javascript] swiper slide 2개 연동하여 제어하기 (0) | 2023.02.03 |