AOS (Animate on Scroll)
웹 페이지에서 스크롤을 기반으로 애니메이션 효과를 적용할 수 있는 오픈소스 JavaScript 라이브러리
- 사용법이 간단하고 가벼움
- HTML 속성만으로도 동작
- 주로 웹사이트의 시각적 효과를 향상 시키고 *사용자 경험(UX)*을 개선하는데 도움을 줌
CDN
<!-- AOS CSS -->
<link href="<https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css>" rel="stylesheet">
<!-- AOS JS -->
<script src="<https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js>"></script>
AOS의 주요 특징
- 스크롤 기반 트리거
- 특정 요소가 뷰포트(Viewport)에 들어오거나 나갈때 애니메이션을 트리거 함
- HTML 속성으로 간단한 설정
- JavaScript 코딩 없이 HTML 요소에
data-aos 속성을 추가해 애니메이션 설정 가능
- 다양한 에니메이션 효과 제공
- 페이드(fade), 슬라이드(slide), 줌(zoom), 플립(flip) 등 기본적인 애니메이션 효과를 제공
- 가벼운 라이브러리
- 성능에 최적화된 경량 라이브러리로, 웹사이트의 로딩 속도에 큰 영향을 주지 않음
- 반응형 설계
- 모바일, 태블릿, 데스크톱 환경에서도 동일하게 작동
- 커스터마이징 가능
- 애니메이션의 지속 시간, 딜레이, 오프셋 등 설정 가능
AOS 기본 사용법
1. AOS 초기화