UI에 모션 효과를 더하는 간단한 새 구문 기반 애니메이션 라이브러리로, 성능과 접근성에 중점을 둡니다.
- GitHub 스타
- 1.6K
- 업데이트일
- Dec 6, 2024
- 라이선스
- MIT License
Sal
이 라이브러리를 사용하면 요소가 화면에 나타날 때 실행되는 부드러운 스크롤 애니메이션으로 웹 애플리케이션을 개선할 수 있습니다.
Sal은 성능에 중점을 둔 경량 스크롤 애니메이션 라이브러리로, 웹 요소가 뷰포트에 들어올 때 동적인 애니메이션을 쉽게 추가할 수 있습니다. 패키지 크기가 2.8 kb 미만이며 종속성 없이 작동해 간결한 사용자 경험을 제공합니다.
Intersection Observer API를 기반으로 구축된 Sal은 요소가 화면에 표시되는 시점을 효율적으로 감지하고 그에 맞춰 애니메이션을 실행합니다. 이 API는 최적의 성능을 제공하며 스크롤 이벤트 모니터링에 따른 오버헤드를 크게 줄여줍니다.
통합도 간단합니다. HTML 요소에 `data-sal` 속성을 추가해 원하는 애니메이션 효과를 지정할 수 있습니다. duration, delay, easing 등의 옵션은 추가 데이터 속성이나 CSS 변수를 사용해 맞춤 설정할 수 있어 애니메이션 동작을 완벽하게 제어할 수 있습니다. 지원되는 애니메이션에는 페이드, 슬라이드, 확대, 뒤집기 등이 있습니다.
Sal은 초기화 후에도 옵션을 수정할 수 있는 고급 기능을 제공해 사용자 상호작용에 따라 반응하고 조정할 수 있습니다. 요소가 뷰포트에 들어오거나 나갈 때 처리할 이벤트 리스너도 지원하므로, 사용자의 스크롤 동작에 실시간으로 반응해야 하는 인터랙티브 애플리케이션에 적합합니다.
기능
- 경량 (2.8 kb 미만)
- 종속성 없음
- 요소가 보일 때 스크롤 애니메이션 실행
- Intersection Observer API 기반
- 간편한 HTML 통합
- 다양한 애니메이션 효과 지원
- duration, delay, easing 옵션 맞춤 설정
- 뷰포트 진입 및 이탈 이벤트
- 사용자 지정 속성에 CSS 변수 지원
- 초기화 후 옵션 재설정 및 업데이트 가능
관련 항목
이 애니메이션 라이브러리는 유연하면서도 사용하기 쉬워 웹 애플리케이션에 매력적인 애니메이션을 간편하게 만들 수 있습니다.
- GitHub 스타
- 50.5K
- 업데이트일
- Dec 6, 2024
- 라이선스
- MIT License
이 애니메이션 도구를 사용하면 웹에서 매력적인 애니메이션과 상호작용을 손쉽게 만들어 일반적인 전환 효과 이상의 사용자 경험을 제공할 수 있습니다.
- GitHub 스타
- 20.0K
- 업데이트일
- Dec 6, 2024
네이티브 브라우저 API를 기반으로 구축된 최신 웹 애니메이션 라이브러리로, 빠른 성능과 작은 파일 크기를 보장합니다.
- GitHub 스타
- 26.1K
- 업데이트일
- Dec 6, 2024
- 라이선스
- MIT License
부드럽고 성능이 뛰어난 전환 효과로 어떤 인터페이스에나 생동감을 더해 사용자 경험을 자연스럽게 향상합니다.
- GitHub 스타
- 28.3K
- 업데이트일
- Dec 6, 2024
- 라이선스
- MIT License
간편하게 매력적인 애니메이션을 더해 웹 애플리케이션을 개선하세요.
- GitHub 스타
- 12.9K
- 업데이트일
- Dec 6, 2024
- 라이선스
- MIT License
React 애플리케이션에서 최소한의 노력으로 인상적인 애니메이션을 만들 수 있는 강력한 도구입니다.
- GitHub 스타
- 26.1K
- 업데이트일
- Dec 6, 2024
- 라이선스
- MIT License
최소한의 코드로 애니메이션을 만들 수 있도록 GSAP을 기반으로 구축된 유틸리티 기반 애니메이션 프레임워크입니다.
- GitHub 스타
- 414
- 업데이트일
- Dec 2, 2024
- 라이선스
- Other