스크롤 애니메이션 효과 wow.js

 

wow.js는 스크롤 시 페이지들의 요소들이 하나씩 애니메이션 효과로 나타날 수 있도록 해주는 라이브러리로 각 요소들마다 옵션값을 넣어 개별적으로 애니메이션 설정할 수 있어서 사용하기 편하다.

 

설치방법

1. 공식 사이트 Github에서 파일 다운로드

https://wowjs.uk/

wow.js — Reveal Animations When Scrolling

 

 

2. WOW-master/css/libs/animate.css 파일을 css폴더나 적당한 폴더에 업로드 원하는 페이지에 로드

<link rel="stylesheet" href="css/animate.css">

 

 

 

3. WOW-master/dist/wow.min.js 파일을 js폴더나 적당한 폴더에 업로드 후 원하는 페이지에 로드, 스크립트 추가

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

 

 

스크립트는 아래처럼 설정도 가능하다.

var wow = new WOW(
  {
    boxClass:     'wow',      // animated element css class (default is wow)
    animateClass: 'animated', // animation css class (default is animated)
    offset:       0,          // distance to the element when triggering the animation (default is 0)
    mobile:       true,       // trigger animations on mobile devices (default is true)
    live:         true,       // act on asynchronously loaded content (default is true)
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null,    // optional scroll container selector, otherwise use window,
    resetAnimation: true,     // reset animation on end (default is true)
  }
);
wow.init();

 

 

 

4. 애니메이션 효과를 원하는 요소 Class명에 wow 와 원하는 애니메이션 효과 스타일 추가(fadeIn, fadeOut, bounceInUp, slideInLeft) 지속시간이나 지연시간 등 원하는대로 조정 가능하다.

<div class="wow fadeIn" data-wow-duration="0.5s" data-wow-delay="0.3s">
Contents
</div>

 

 

[애니메이션 효과]

* bounce

* flash

* pulse

* bounceIn / bounceOut / bounceInLeft / bounceInRight / bounceInUp

* fadeIn / fadeInDown / fadeInLeft / fadeInRight / fadeInUp 등

 

더 많은 효과는 https://animate.style/ 에서 확인 가능.

 

[wow 속성]

* data-wow-duration : 애니메이션 지속 시간

* data-wow-delay : 애니메이션이 실행되기까지의 지연 시간

* data-wow-offset : 요소가 어느정도 올라왔을때 애니메이션이 실행 될지 설정

* data-wow-iteration : 애니메이션 반복 횟수