canvas-watch

canvas-watch는 스티키 네비게이션 바나 도킹된 플레이어 같은 플로팅 요소와 배경 트리거 영역 간의 2D 겹침 감지를 처리하기 위한 프레임워크 독립 라이브러리입니다. IntersectionObserver와 달리, 스크롤 조상이나 뷰포트 대신 경계 사각형을 비교하여 플로팅 요소가 현재 어느 배경 영역 위에 있는지 판단합니다. 주요 기능: - 자동 클래스 전환: "watched" 태그가 붙은 요소는 가장 많이 겹치는 트리거 영역에 따라 `over-*` 클래스를 부여받습니다(기본 임계값 50%). - 중첩 지원: 중첩된 트리거 영역은 컨테이너보다 우선순위를 가지며 복잡한 레이아웃에서 더 구체적인 스타일링이 가능합니다. - 뷰포트 추적: 참조 요소가 뷰포트 위, 내부, 아래 또는 외부에 있는지 반응적으로 추적할 수 있습니다. - 성능 최적화: 단일 requestAnimationFrame 루프와 IntersectionObserver를 가시성 게이트로 사용하여 화면 내 요소에만 겹침 계산을 실행합니다. - 이벤트 시스템: 적용된 클래스가 변경될 때마다 `canvaschange` CustomEvent를 발생시켜 CSS 이상의 로직을 가능하게 합니다. 라이브러리는 프레임워크 독립 코어와 전용 Svelte 어댑터를 제공하며, SSR 안전하고 모든 현대 주요 브라우저를 지원합니다.