AOS
STEP1. AOS 설치
// CDN 방식
<head>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>
// 리소스 방식
<head>
<script src="./js/aos.js"></script>
<link rel="stylesheet" href="./css/aos.css">
</head>
❗AOS 리소스 다운로드
💡 https://michalsnik.github.io/aos/
STEP2. 태그에 코드적용
/* div 박스에 색깔 적용 */
* {
box-sizing: border-box;
}
.item {
width: 200px;
height: 200px;
margin: 50px auto;
padding-top: 75px;
background: #ccc;
text-align: center;
color: #FFF;
font-size: 3em;
}
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
<div class="item" data-aos="flip-left" data-aos-duration="3000">12</div>
STEP3. API 실행
<script>
$(document).ready(function (){
AOS.init();
});
</script>
// 또는
AOS.init({
duration: 1200,
})
❗끝
💡 aos.js을 통해 간단하게 스크롤 애니메이션효과를 사용할 수 있다.
AOS API
전체
| data-aos |
사용할 애니메이션 효과명 |
| data-aos-easing |
애니메이션 시간흐름에 따른 속도설정 옵션(default: ease) |
| data-aos-anchor |
특정한 객체에 anchor를 설정하여, 어떤 객체를 기준으로 애니메이션이 시작 될지를 설정 |
| data-aos-delay |
애니메이션 재생 대기시간 설정(default: 0) |
| data-aos-offset |
애니메이션 효과가 시작될 객체의 위치 설정 |
| data-aos-duration |
애니메이션의 재생시간 설정(default: 400) |
| data-aos-anchor-placement |
애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom) |
| data-aos-once |
스크롤 할때마다 애니매이션이 재생될지를 설정(default: false) |
data-aos
| Fade animation |
Flip animation |
Slide animation |
Zoom animation |
| ✔ fade |
✔ flip-up |
✔ slide-up |
✔ zoom-in |
| ✔ fade-up |
✔ flip-down |
✔ slide-down |
✔ zoom-in-up |
| ✔ fade-down |
✔ flip-left |
✔ slide-left |
✔ zoom-in-down |
| ✔ fade-left |
✔ flip-right |
✔ slide-right |
✔ zoom-in-left |
| ✔ fade-right |
|
|
✔ zoom-in-right |
| ✔ fade-up-left |
|
|
✔ zoom-out |
| ✔ fade-up-right |
|
|
✔ zoom-out-up |
| ✔ fade-down-left |
|
|
✔ zoom-out-down |
| ✔ fade-down-right |
|
|
✔ zoom-out-left |
| |
|
|
✔ zoom-out-right |
data-aos-easing : Attribute Value
| data-aos-easing : Attribute Value |
| ✔ 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-quart |
| ✔ ease-out-quart |
| ✔ ease-in-out-quart |
data-aos-anchor-placement : Attribute Value
| data-aos-anchor-placement : Attribute Value |
| ✔top-bottom |
| ✔ top-center |
| ✔ top-top |
| ✔ center-bottom |
| ✔ center-center |
| ✔ center-top |
| ✔ bottom-center |
| ✔ bottom-top |
Leave a comment