AOS(Animate On Scroll Library) 스크롤 애니메이션 효과 라이브러리

aos

현재 프로젝트 진행중인데 메인페이지에 아무래도 심심해서 애니메이션 효과를 주고싶다.

 

근데 CSS공부하기엔? 아니 공부는 이미했지만 하나하나 세세하게 효과를 주기엔 너무 시간이 없어서 급한대로 찾아보니

 

편하게 애니메이션 효과를 줄 수 있는 라이브러리가 있었다.

 

쉽게 설치해서 사용할 수 있게 라이브러리화 되어있어 기록해본다.

 

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

AOS - Animate on scroll library

여기 들어오면 사용법도 매우쉽게 되어있다.

 

yarn add aos
npm install aos --save

둘중하나 골라서 설치해주고

 

download받아서 

dist/aos.css만 불러와서 사용해 줘도된다.

 

혹은 CND를 불러와서 사용해도됨!

<script>
  AOS.init();
</script>

그리고 이와같이 처음 사용만 설정해주면된다.

 

React에서는 아래와같이 사용한다.

 

import AOS from "aos";
import "aos/dist/aos.css";
function Main(){
 
  AOS.init({
    duration : 1000
})

....

이와같이 상단에 aos와 css를 import해온뒤 사용해주거나

import AOS from "aos";
import "aos/dist/aos.css";


function Test(){


  
  useEffect(() => {
    AOS.init({
        duration : 1000
    });
});

main컴포넌트가 아닐때는 useEffect를 이용해 사용하면 되는거같다.

 

-참고한 블로그 두개 주소

https://jjamong.github.io/docs/front/react/plugin/aos/

AOS(Animate On Scroll Library) | 짜몽 개발 연구소

https://www.biew.co.kr/entry/%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%ED%9A%A8%EA%B3%BC%EB%A5%BC-%EC%A4%84-%EC%88%98-%EC%9E%88%EB%8A%94-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC%E3%86%8DAOSjs

스크롤 애니메이션 효과를 줄 수 있는 라이브러리ㆍAOS.js