AOS
Animate On Scroll Library
프로젝트에서 퍼블리싱 작업 중 세로로 긴 콘텐츠의 메인 또는 서브페이지를 코딩하다 보면,
고객사의 요청에 의해 스크롤되었을 때 콘텐츠 요소의 애니메이션 효과를 퍼블리싱해야 할 경우가 있습니다.
그럴 경우 AOS 또는 ScrollMagic 라이브러리를 사용하면 쉽게 스크롤 애니메이션 효과를 구현할 수 있습니다.
두 가지 모두 사용하기 쉽고, 좋은 스크롤 애니메이션 라이브러리입니다.
저는 이 두 가지 라이브러리를 프로젝트 상황에 따라 사용합니다.
ScrollMagic 라이브러리의 경우 GSAP TweenMax를 알아야 사용하기 편리합니다.
또한 자바스크립트와 jQuery를 알아야 합니다.
애니메이션 효과나 제어를 직접 해야 하기 때문에 시간 소요가 더 많이 됩니다.
그렇기에 AOS 라이브러리보다 애니메이션(속도, 시작 위치, 곡선 등)을 자유롭게 구현할 수 있습니다.
그러나 프로젝트의 시간이 촉박할 경우, ScrollMagic 라이브러리로 퍼블리싱하다 보면 야근이 눈에 훤하죠?
그럴 경우 AOS 라이브러리를 사용하면 쉽게 스크롤 애니메이션을 코딩할 수 있습니다.
AOS 라이브러리는 자바스크립트를 몰라도 쉽게 사용할 수 있습니다.
또한 많은 효과를 제공하기 때문에 ScrollMagic 라이브러리에 뒤떨어지지 않습니다.
'시간 투자 대비 가성비는 모든 스크롤 애니메이션 라이브러리 중 최고'라고 생각됩니다.
제가 왜 두 가지 라이브러리를 상황에 따라 골라서 사용하는지 AOS와 ScrollMagic 라이브러리의 차이를 아시겠죠?
그럼 지금부터 이번 포스팅의 주제인 AOS 라이브러리에 대해 알아보겠습니다.
Installation
기본적으로 <head> 태그 안에 aos.js와 aos.css 라이브러리 파일을 불러옵니다.
jQuery 라이브러리도 필요합니다.
aos.js, jQuery.js는 CDN으로 불러오겠습니다.
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
그다음 <header>, <body>, 스크립트 영역 중 한 곳에 AOS 라이브러리를 사용하기 위한 초기화 스크립트를 작성합니다.
여기까지가 AOS 라이브러리를 사용하기 위한 준비과정입니다.
<script>
AOS.init();
/* 주석부분과 같이 AOS API - Global Setting 가능
AOS.init({
offset: 120,
delay: 0,
duration: 400,
easing: 'ease',
once: false,
mirror: false,
anchorPlacement: 'top-bottom'
});
*/
</script>
사용방법(How to use AOS?)
기본 완성된 기본 사용방법은 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>AOS Animation</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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<!-- AOS 스크립트 초기화 -->
<script>
AOS.init();
</script>
<!-- //AOS 스크립트 초기화 -->
<div aos="fade-up" data-aos-offset="200" data-aos-easing="ease-out-cubic" data-aos-duration="500">
<!-- 애니메이션 객체 요소 -->
<!-- //애니메이션 객체 요소 -->
</div>
</body>
</html>※ AOS 라이브러리 애니메이션은 블록 태그(Block Tag)에만 적용 가능합니다. 인라인 태그(Inline Tag)에는 효과가 적용되지 않습니다.
data-aos 옵션 속성
AOS 라이브러리 코드 사용방법을 알았으니, 이제 API 옵션에 대해 알아보겠습니다.
옵션 속성이 무엇인지 정확히 알아야 제대로 사용할 수 있기 때문입니다.
옵션 속성도 정확히 모른 상태에서 사용방법만 안다는 것은 무의미하겠죠?
| API | 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) |
※ delay와 duration은 0부터 3000까지 최대값을 설정할 수 있고, 50 단위로 설정 변경이 가능합니다.
data-aos : Attribute Value
| Fade animation |
|
Flip animation |
|
|---|---|---|---|
| Slide animation |
|
Zoom animation |
|
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
- ✔ top-bottom
- ✔ top-center
- ✔ top-top
- ✔ center-bottom
- ✔ center-center
- ✔ center-top
- ✔ bottom-center
- ✔ bottom-top
AOS 라이브러리 예제 및 다운로드
AOS Library 공식 사이트 : https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
AOS Library Github : https://github.com/michalsnik/aos
GitHub - michalsnik/aos: Animate on scroll library
Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.
github.com
마치며...
여러 가지 스크롤 애니메이션 라이브러리가 있지만, 저는 AOS 라이브러리가 가장 사용하기 쉽다고 생각합니다.
자바스크립트를 잘 몰라도 쉽게 사용할 수 있기에 사용자의 범위도 신입부터 경력자까지 범용성 또한 좋다고 생각합니다.
시간이 촉박한 프로젝트에서 스크롤 애니메이션 퍼블리싱을 구현해야 할 경우, 작업시간이 부족해서 헤매지 마시고 AOS Library로 멋있고 동적인 사이트를 쉽게 만들어 보시기 바랍니다.
맑은커뮤니케이션 저희 퍼블리셔 직원분들도 파이팅!!
감사합니다.
'javascript' 카테고리의 다른 글
| 스크롤 애니메이션 효과를 줄 수 있는 라이브러리ㆍAOS.js (0) | 2021.10.16 |
|---|---|
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 심화2(곡선 애니메이션) (0) | 2021.10.14 |
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 심화1(GSAP Callback) (0) | 2021.10.12 |
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 기초3(GSAP Controlling, Easing) (0) | 2021.10.08 |
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 기초2(GSAP Controlling) (0) | 2021.10.07 |
| [TweenMaxㆍGSAP] 트윈맥스 제대로 배우기 - 기초1(GSAP 메서드) (0) | 2021.10.01 |
invalid-file
invalid-file