뷰포트 감지
IntersectionObserver가 요소의 가시성을 추적합니다.
양방향 토글
이 섹션을 지나쳤다가 다시 돌아와 보세요.
다시 오셨네요!
이 섹션에 들어올 때마다 나타납니다.
특징
카드가 뷰포트에 들어오면 애니메이션되고, 벗어나면 리셋됩니다.
양방향
위로 스크롤하든 아래로 스크롤하든 동작합니다.
자동 리셋
뷰포트를 벗어나면 요소가 처음 상태로 돌아갑니다.
숫자로 보기
뷰포트에 들어오면 통계가 애니메이션됩니다.
97%
IO 지원율
트리거 방향
가벼움
성능 부담
구현 방식
- IO가
threshold로 가시성을 추적합니다 - 교차 상태에 따라
.in-view클래스를 토글합니다 - 실제 애니메이션은 CSS 트랜지션이 담당합니다
- 뷰포트를 벗어나면 리셋됩니다
브라우저 지원
- Chrome 51+ ✅
- Firefox 55+ ✅
- Safari 12.1+ ✅
- Edge 15+ ✅
- 브라우저 호환성이 아주 좋습니다
활용처
- 반복 재생되는 스크롤 애니메이션
- 인터랙티브 스토리텔링
- 제품 소개 페이지
- 스크롤로 여는 콘텐츠