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의 주요 특징

1. 스크롤 기반 트리거
   • 특정 요소가 뷰포트(Viewport)에 들어오거나 나갈때 애니메이션을 트리거 함
2. HTML 속성으로 간단한 설정
   • JavaScript 코딩 없이 HTML 요소에 data-aos 속성을 추가해 애니메이션 설정 가능
3. 다양한 에니메이션 효과 제공
   • 페이드(fade), 슬라이드(slide), 줌(zoom), 플립(flip) 등 기본적인 애니메이션 효과를 제공
4. 가벼운 라이브러리
   • 성능에 최적화된 경량 라이브러리로, 웹사이트의 로딩 속도에 큰 영향을 주지 않음
5. 반응형 설계
   • 모바일, 태블릿, 데스크톱 환경에서도 동일하게 작동
6. 커스터마이징 가능
   • 애니메이션의 지속 시간, 딜레이, 오프셋 등 설정 가능

AOS 기본 사용법

1. AOS 초기화