react AOS 사용법

저번 시간에 포스팅 했던 Animation.css와 비슷한 

AOS 사용법을 알아보도록 하자.

 

 

먼저, AOS를 설치한다.

yarn add aos

 

 

 

AOS는 특이하게 useEffect를 사용한다.

따라서 useEffect를 import 해준다.

 

import React, {useEffect} from 'react' ;

 

 

 

그리고 

AOS를 import 해준다.

 

import AOS from 'aos';

import "aos/dist/aos.css';

 

 

 

이제 useEffect를 적어준다.

 

useEffect(() => {

AOS.init({

duration: 1500,

});

})

 

 

이제 효과를 적용해보자.

페이지를 보면

 

요렇게 박스가 나온다.

원하는 효과가 있다면 data-aos 부분을 복붙해서

원하는 요소에 붙여넣어보자.

 

 

<p data-aos="fade-up">

이렇게 작성하면 해당 p 태그에 효과가 적용된 것을 볼 수 있다.

p 뿐만 아니라 다른 태그에도 적용할 수 있고,

class와 함께 사용할 수 있다.