![[JavaScript] AOS (Animate On Scroll)](/title-images/296.jpg)
[JavaScript] AOS (Animate On Scroll)
AOS (Animate On Scroll)
마우스 스크롤시 정의된 element의 animation 효과 주기
AOS 공식사이트 바로가기AOS는 페이지 스크롤시 특정 element에 대해 다양한 애니메이션 효과를 제공한다.
가령 특정 레이어가 나타나거나 혹은 사라지거나, 좌측 혹은 우측에서 나타나거나 하는 식이다.
install
yarn add aos
npm install aos --save
bower install aos --save
간단한 사용법
<html>
<head>
<!-- AOS 라이브러리 불러오기-->
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
</head>
<body>
<!-- data-aos-* 속성을 태그에다가 써주면 알아서 동작되게 된다 -->
<div data-aos="zoom-out-right"> <!-- 오른쪽으로 줌아웃 하는 모션 설정 -->
<!-- 내용 ... -->
</div>
<!-- 다양한 속성들이 존재한다. (설명은 후술) -->
<div data-aos="fade-up"
data-aos-offset="200"
data-aos-easing="ease-out-cubic"
data-aos-duration="2000"
>
<!-- 내용 ... -->
</div>
<!-- AOS 스크립트 시작 -->
<script>
AOS.init(); // 자바스크립트로 init()을 해야 동작한다.
</script>
</body>
</html>