끄적이는 공간

퍼블리셔 Note/JAVASCRIPT

[JQuery] 스크롤 페이드 인 앤 아웃 효과1 - AOS 라이브러리

Joroki 2022. 1. 7. 17:56

1. 스크롤 애니메이션 라이브러리(AOS) 활용 

 

-AOS(Animate On Scroll Library)

 

AOS는 자바스크립트를 다루는 방법을 몰라도 HTML 태그만 확인 할 줄 안다면 간단하게 스크롤 애니메이션을 구현 할 수 있는 라이브러리 이다. 간단한 적용 예시와 설명은 아래 링크 확인이 가능하다.

https://michalsnik.github.io/aos/

 

 

AOS - Animate on scroll library

AOS Animate On Scroll Library Scroll down

michalsnik.github.io

 

첫번째로, <head>태그 안에 아래와 같이 입력해서 라이브러리의 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> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>

 

두번째로, <body> 태그 or 공통으로 지정될 common.js 파일에 AOS 라이브러리 초기화 스크립트를 작성한다.

 

<body>
<script>
    $(function(){
       AOS.init();
    });
</script>
</body>

 

여기까지 했다면 AOS 라이브러리를 사용하기 위한 준비과정을 모두 끝냈다.

아래 부터는 HTML에 작성된 요소에 애니메이션 효과를 적용하는 방법이다.

 

<!-- 가장 기본적인효과 -->

<div data-aos="fade-up"></div> <!-- 아래에서 위로 페이드인 -->
<div data-aos="fade-down"></div> <!-- 위에서 아래로 페이드인 -->
<div data-aos="fade-right"></div> <!-- 왼쪽에서 오른쪽으로 페이드인 -->
<div data-aos="fade-left"></div> <!-- 오른쪽에서 왼쪽으로 페이드인 -->

 

효과만 주기위해선 위처럼 'data-aos' 속성으로 해당 요소에 원하는 효과를 적용하면 매우 간단하게 스크롤 애니메이션이 동작한다.

 

효과에 여러가지 옵션을 적용하고자 한다면 아래와 같이 작성하면 된다.

<div data-aos="효과이름" aos-offset="300" aos-easing="ease-in-sine" aos-duration="500></div>

//data-aos-offset - 효과 시작 스크롤 위치 옵션
//data-aos-easing - 재생옵션
//data-aos-duration - 재생시간 옵션

 

아래 AOS 라이브러리 개발자의 GitHub에서 더 많은 효과,속성을 확인 해 볼 수 있다.

 

 

GitHub - michalsnik/aos: Animate on scroll library

Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub.

github.com

반응형