[자바스크립트 플러그인]쉽고 간단하게 스크롤 애니메이션 등록하기 WOW.js

https://wowjs.uk/

wow.js — Reveal Animations When Scrolling

 

이 페이지와 같이 다양한 스크롤 이벤트를 등록할 수 있다. 

 

방법은 매우 쉽고 간단하다.

 

스크롤할때 이 애니메이션으로 동작해! 라고 클래스로 등록해주기만 하면 스크롤에 따라 알아서 적용된다 .

 

적용방법도 간단하다

 

 

일단 필요한 두가지 

 

CSS파일

<link rel="stylesheet" href="https://wowjs.uk/css/libs/animate.css">

 

스크립트

<script src="https://wowjs.uk/dist/wow.min.js"></script>

 

 

 

그후 

class의 wow 는 스크롤이벤트를 등록하겠다는 의미

flash 애니메이션 명으로

 

flash 이외에도 bounceInDown 나 rotateIn 와 같이 이름을 그대로 써주면 해당 애니메이션으로 동작한다.

이 이름은 (https://daneden.github.io/animate.css/) 해당 사이트에서 효과를 보고 선택하면 된다. 

 

<div data-wow-delay="0.5s" class="wow flash">
    <p class="circle bg-green">such easy</p>
</div>

 

data 속성은 

data-wow-duration: 애니메이션 진행시간
data-wow-delay: 애니메이션 지연시간(설정시간만큼 기다린 후 애니메이션 동작)
data-wow-offset: 애니메이션 시작거리(스크롤이 어느정도 진행되었을때 애니메이션이 시작될지.. 브라우저 창 아래에서 얼만큼 나와야 시작되는지와 같다 숫자가 클수록 스크롤이 많이 내려가야 시작됨)
data-wow-iteration:애니메이션이 몇번 반복될지 지정

 

 

 

위와같이 html 속성에 선언해 주고

각각의 css를 적용한 후

스크립트에 

아래 한줄을 통해 이벤트를 등록한다.

new WOW().init();

 위 한줄의 의미는 아래와 같다.

따로 지정해줄 값이 없다면 위와같이 간단하게 쓰면되고,

다른것으로 변경하고 싶으면 아래 코드에서 각 속성의 값을 변경하여 사용하면된다. 

 

 wow = new WOW({
  boxClass:     'wow',      //  스크롤 이벤트를 등록할 클래스 
  animateClass: 'animated', // 기본값 animated => animate.css library 를 적용한다 
  offset:       0,          // data-wow-offset 의 기본값 0 
  mobile:       true,       // 모바일에서 동작할 것인지 
  live:         true        // 새로추가되는 요소 확인하여 동작 
})
wow.init();