가시성 감지
요소가 뷰포트에 들어오고 나가는 것을 효율적으로 감지합니다.
환영합니다
섹션이 25% 보이면 커버가 올라갑니다.
아래로 스크롤
Intersection Observer가 가시성을 감지합니다.
특징
카드가 뷰포트에 들어오면 나타나고, 벗어나면 원래대로 돌아갑니다.
임계값 제어
얼마나 보여야 트리거할지 비율로 정확히 정할 수 있습니다.
넓은 지원
Safari를 포함한 모든 최신 브라우저에서 동작합니다.
숫자로 보기
보이기 시작하면 통계가 튀어나옵니다.
97%
브라우저 지원율
비동기
메인 스레드를 막지 않음
가벼움
성능 부담
구현 방식
IntersectionObserver가 요소의 가시성을 관찰합니다threshold: 0.25면 25% 보일 때 트리거됩니다- 임계값은 요소가 실제로 도달할 수 있는 비율이어야 합니다 — 250vh 요소는 최대 0.4까지만 보입니다
- CSS 클래스를 토글해 트랜지션을 일으킵니다
- 옵저버 하나로 여러 요소를 볼 수 있습니다
브라우저 지원
- Chrome 51+ ✅
- Firefox 55+ ✅
- Safari 12.1+ ✅
- Edge 15+ ✅
- 구형 브라우저용 폴리필도 있습니다
성능
- 비동기로 실행되어 메인 스레드를 막지 않습니다
- 가시성 계산을 브라우저가 최적화합니다
- 스크롤 이벤트 리스너보다 효율적입니다
- 대기 중에는 CPU를 거의 쓰지 않습니다