AOS (Animate On Scroll)
기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우, AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있다.
AOS 라이브러리는 자바스크립트를 깊게 몰라도 쉽게 사용할 수 있다는 장점이 있다.
시간 투자 대비 가성비는 모든 스크롤 애니메이션 라이브러리 중 최고 라고 평가 받는다.
AOS 설치
<head>
<!-- AOS 라이브러리 불러오기-->
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>AOS 사용방법
<html>
<head>
<!-- AOS 라이브러리 불러오기-->
<link rel="stylesheet" href="https://unpkg.com/aos@2.3.1/dist/aos.css">
<script src="https://unpkg.com/aos@2.3.1/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>data-aos 옵션 속성
<div
data-aos="fade-up"
data-aos-offset="200"
data-aos-delay="50"
data-aos-duration="1000"
data-aos-easing="ease-in-out"
data-aos-mirror="true"
data-aos-once="false"
data-aos-anchor="#secton_body"
data-aos-anchor-placement="top-center"
>
</div>| 옵션 | 효과 설명 |
|---|---|
| data-aos | 사용할 애니메이션 효과명 |
| data-aos-easing | 애니메이션 시간흐름에 따른 속도설정 옵션(default: ease) |
| data-aos-delay | 애니메이션 재생 대기시간 설정(default: 0) |
| data-aos-offset | 애니메이션 효과가 시작될 객체의 위치 설정 |
| data-aos-anchor | 애니메이션이 어떤 요소를 기준으로 실행될지를 결정하는 속성, 다른 요소를 기준으로 애니메이션이 트리거 |
| data-aos-anchor-placement | 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom) |
| data-aos-once | 스크롤 할때마다 애니매이션이 재생될지를 설정 (default: false) 이 값을 false 하게되면, 스크롤을 위로 올렷다 다시 내릴때 애니메이션이 다시 재생, true면 한번만 재생하고 안됨 |
❕delay와 duration은 0부터 3000까지 최대값을 설정할 수 있고, 50 단위로 설정 변경이 가능하다.
1. data-aos : 애니메이션 효과 종류
Fade animations
- fade
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left
Fade animations
- flip-up
- flip-down
- flip-left
- flip-right
Slide animations
- slide-up
- slide-down
- slide-left
- slide-right
Zoom animations
- zoom-in
- zoom-in-up
- zoom-in-down
- zoom-in-left
- zoom-in-right
- zoom-out
- zoom-out-up
- zoom-out-down
- zoom-out-left
- zoom-out-right
2. data-aos-anchor-placement : 애니메이션 시작 위치 속성 종류
- top-bottom
- top-center
- top-top
- center-bottom
- center-center
- center-top
- bottom-bottom
- bottom-center
- bottom-top
data-aos-easing : 애니메이션 재생 속도 종류
- linear
- ease
- ease-in
- ease-out
- ease-in-out
- ease-in-back
- ease-out-back
- ease-in-out-back
- ease-in-sine
- ease-out-sine
- ease-in-out-sine
- ease-in-quad
- ease-out-quad
- ease-in-out-quad
- ease-in-cubic
- ease-out-cubic
- ease-in-out-cubic
- ease-in-quart
- ease-out-quart
- ease-in-out-quart
🔗사용방법 예시 사이트
웹 퍼블리셔의 코딩 일기