스크롤 애니메이션 wow.js 사용법

안녕하세요 오늘은 스크롤내리면 나타나는 애니메이션 라이브러리인 wow.js의 사용법에 대해 알아보려고 합니다.

간단한 사용법과 다양한 애니메이션효과를 제공합니다.

 

공식사이트

https://wowjs.uk/

wow.js — Reveal Animations When Scrolling

 

 

설치방법

https://github.com/graingert/wow

GitHub - graingert/WOW: Reveal CSS animation as you scroll down a page

wow.js 깃허브에 들어가서 다운로드해줍니다.

dist폴더안에 wow.js이나 wow.min.js를 사용할 디렉토리에 넣어줍니다. 

 

 

wow.js는 animate.css와 함께 사용되는데요.

animate.css는 WOW/css/libs

에서 다운받을 수 있습니다.

 

혹은 아래의 CDN을 사용해주시면 됩니다.

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />

 

 

사용방법

<div class="wow animate__animated animate__fadeInLeft">HELLO</div>
<div class="wow animate__animated animate__fadeInRight">HELLO</div>

스크롤애니메이션을 사용할 곳에 class를 넣어줍니다. wow와 animate__animated는 기본으로 들어가야할 class입니다.

https://animate.style/

Animate.css | A cross-browser library of CSS animations.

다음으로 위의 사이트에 접속해 사용할 애니메이션 효과를 복사에 class에 넣어주면 됩니다.

 

js

 <script>
	new WOW().init();
</script>

마지막으로 위의 코드를 복사해 넣어주면 스크롤 내리면 나타나는 애니메이션을 간단하게 구현할 수 있습니다.