Sal

Sal은 성능에 중점을 둔 경량 스크롤 애니메이션 라이브러리로, 웹 요소가 뷰포트에 들어올 때 동적인 애니메이션을 쉽게 추가할 수 있습니다. 패키지 크기가 2.8 kb 미만이며 종속성 없이 작동해 간결한 사용자 경험을 제공합니다.

Intersection Observer API를 기반으로 구축된 Sal은 요소가 화면에 표시되는 시점을 효율적으로 감지하고 그에 맞춰 애니메이션을 실행합니다. 이 API는 최적의 성능을 제공하며 스크롤 이벤트 모니터링에 따른 오버헤드를 크게 줄여줍니다.

통합도 간단합니다. HTML 요소에 `data-sal` 속성을 추가해 원하는 애니메이션 효과를 지정할 수 있습니다. duration, delay, easing 등의 옵션은 추가 데이터 속성이나 CSS 변수를 사용해 맞춤 설정할 수 있어 애니메이션 동작을 완벽하게 제어할 수 있습니다. 지원되는 애니메이션에는 페이드, 슬라이드, 확대, 뒤집기 등이 있습니다.

Sal은 초기화 후에도 옵션을 수정할 수 있는 고급 기능을 제공해 사용자 상호작용에 따라 반응하고 조정할 수 있습니다. 요소가 뷰포트에 들어오거나 나갈 때 처리할 이벤트 리스너도 지원하므로, 사용자의 스크롤 동작에 실시간으로 반응해야 하는 인터랙티브 애플리케이션에 적합합니다.