반응형

 

 

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
  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-left
  • fade-up-right
  • fade-down-left
  • fade-down-right
Flip animation
  • flip-up
  • flip-down
  • flip-left
  • flip-right
Slide animation
  • slide-up
  • slide-down
  • slide-left
  • slide-right
Zoom animation
  • 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

 

 

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로 멋있고 동적인 사이트를 쉽게 만들어 보시기 바랍니다.

맑은커뮤니케이션 저희 퍼블리셔 직원분들도 파이팅!!

감사합니다.

 

 

 

반응형

+ Recent posts