스크롤이 이벤트 발생 위치에 도달했을 때 쉽게 애니메이션 효과를 줄 수 있는 스크롤 애니메이션 라이브러리인 'AOS' 사용 방법에 대해 정리해 보았다.
AOS 라이브러리 공식 홈
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
AOS 설치
head 태그 안에 안내해 준 CDN 소스인 CSS와 JS를 넣는다.
<head>
<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 라이브러리 사용을 위한 초기화 스크립트를 작성한다.
<body>
...
<script>
AOS.init();
</script>
</body>
data-aos 옵션 속성
- data-aos : 사용할 애니메이션 효과 명
- data-aos-offset : 애니메이션 효과가 시작될 객체의 위치 설정
- data-aos-delay : 애니메이션 재생 대기 시간 설정(default: 0)
- data-aos-duration : 애니메이션의 재생시간 설정(default: 400)
- data-aos-easing : 애니메이션 시간 흐름에 따른 속도 설정 옵션(default: ease)
- data-aos-once : 스크롤할 때마다 애니메이션이 재생될지를 설정 (default: true) / false 일시 스크롤을 위로 올렸다 다시 내릴 때 애니메이션이 다시 재생됨
- data-aos-anchor-placement : 애니메이션이 어느 위치에서부터 적용될지 설정(default: top-bottom)
<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-placement="top-center"
>
</div>
AOS 사용 방법
애니메이션 효과를 주고 싶은 해당 영역에 data-aos 옵션 속성을 적용하면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 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>
<style>
.area {
max-width: 1400px;
margin: 0 auto;
padding: 200px 100px;
}
.box {
flex: 1;
height: 300px;
background-color: antiquewhite;
margin-bottom: 300px;
}
.flex {
display: flex;
align-items: center;
gap: 20px;
}
</style>
</head>
<body>
<section class="area">
<div class="flex">
<div class="box" data-aos="fade-up" data-aos-duration="1000"></div>
<div
class="box"
data-aos="fade-up"
data-aos-delay="50"
data-aos-duration="1000"
></div>
</div>
<div class="box" data-aos="fade-left" data-aos-duration="1000"></div>
<div class="flex">
<div class="box" data-aos="fade-left" data-aos-duration="1000"></div>
<div class="box" data-aos="flip-left" data-aos-duration="1000"></div>
<div class="box" data-aos="fade-right" data-aos-duration="1000"></div>
</div>
</section>
<script>
AOS.init();
</script>
</body>
</html>
결과
'Javascript' 카테고리의 다른 글
| 배열 reduce() 사용법 및 예제 (0) | 2024.08.26 |
|---|---|
| input checkbox 하나만 선택 (0) | 2024.08.26 |
| select custom (0) | 2024.08.26 |
| map(), filter(), find() (0) | 2024.08.25 |
| 특정 위치에 해당하는 문자 찾기 (0) | 2024.08.25 |
