동적인 애니메이션을 만들기 위해서는 CSS3를 이용을 해야한다.
CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜준다.

간단히 애니메이션에 대해서 알아보도록 하자.

애니메이션 속성

  • animation-delay:
    엘리먼트가 로드되고 나서 언제 애니메이션 시작될지 지정한다.
  • animation-direction:
    애니메이션 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정한다.
  • animation-duration:
    한 사이클의 애니메이션이 얼마에 걸쳐 일어날지 지정한다.
  • animation-ieration-count:
    애니메이션이 몇 번 반복될지 지정한다. infinite로 지정하면 무한반복이다.
  • animation-name:
    @keyframes 애니메이션의 이름을 지정한다.
  • animation-play-state:
    애니메이션의 실행 여부 또는 일시 중지 여부를 지정한다.
  • animation-fill-mode:
    애니메이션의 속도 곡선을 지정한다.

@keyframes Rule

@keyframes 규칙 내에서 CSS 스타일을 지정하면 애니메이션이 특정 시간에 현재 스타일에서 새 스타일로 점진적으로 변경된다.

애니메이션이 작동하도록 하려면 애니메이션을 요소에 바인딩해야 한다.

CSS3 애니메이션을 사용하면 단점이 하나가 있다.
하위 브라우저에서는 지원을 안한다.

http://caniuse.com/#search=keyframes 에서 확인할 수 있다.

Property
@keyframes 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-

CSS3 애니메이션 자세히 설명은 포스팅을 또 하겠다.
다시 돌아와 wow.js 사용하는 방법을 안내하겠다.

페이지를 아래로 스크롤 할 때 CSS 애니메이션을 보여준다. 기본적으로 animate.css 애니메이션을 트리거하는 데 사용할 수 있다.
wow.js 는 좋아하는 애니메이션을 쉽게 변경할 수 있게 해주는 라이브러리이다.
샘플 페이지보기

장점

  1. Scrollorama와 같은 다른 JavaScript 시차 플러그인보다 작습니다 (환상적인 일을하지만 단순한 요구에 너무 무거울 수 있음)
  2. 간단히 설치하고 animate.css와 함께 사용하므로 설정이 매우 빠르다.
  3. 빠른 실행이 가능하고 코드가 가볍다.
  4. 설정을 변경할 수 있다.

다운 및 설정하기

  1. github에서 다운받기

    녹색 Clone or download을 클릭 후 DownloadZIP을 클릭하여 다운 받으면 된다.
    바로 받고 싶다면 다운로드를 클릭하면 된다. 똑같은 압축파일이다.
  2. animate.css 연결하기 
    <link rel="stylesheet" href="css/animate.css" />

    아니면 CDNJS 이용하기

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
  3. wow.js 연결 및 실행 
    <script src="js/wow.min.js"></script>
<script>
	new WOW().init();
</script>

CSS 애니메이션 적용하기

  1. html에 적용하기 
    <div class="wow">
	Content to Reveal Here
</div>
  2. 애니메이션 스타일 선택
    Animate.css에서 애니메이션 스타일을 선택한 다음 CSS 클래스를 HTML 요소에 추가한다.

    <div class="wow bounceInUp">
	Content to Reveal Here
</div>
이러면 끝났다. 한 번 스크롤을 해서 확인을 해보자.

고급 옵션

  • data-wow-duration: 애니메이션 기간을 변경
  • data-wow-delay: 애니메이션 시작 전에 지연시간 변경
  • data-wow-offset: 애니메이션 시작 거리 (브라우저 하단과 관련됨)
  • data-wow-iteration: 애니메이션이 반복되는 횟수
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
</section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">
</section>

사용자 설정

  • boxClass: 사용자가 스크롤 할 때 숨겨진 box를 표시하는 클래스 이름이다.
  • animateClass: CSS 애니메이션을 트리거하는 클래스 이름 (기본적으로 animate.css 라이브러리의 'animated'이다.)
  • offset: 브라우저 뷰포트의 하단과 숨겨진 상자의 상단 사이의 거리를 정의한다.
    사용자가 스크롤하여 이 거리에 도달하면 숨겨진 상자가 표시된다.
  • mobile: 모바일 기기에서 WOW.js를 켜거나 끌 수 있다.
  • live: 페이지에서 새로운 WOW 요소를 주의깊게 확인할 수 있다.
wow = new WOW({
	boxClass:     'wow',      // 기본값
	animateClass: 'animated', // 기본값
	offset:       0,          // 기본값
	mobile:       true,       // 기본값
	live:         true        // 기본값
})
wow.init();

마치며

wow.js 적용된 페이지에 가서 한번 해보면 어떻게 작동 되는지 알 수 있다.
샘플 페이지 보러가기
wow.js 플러그인 말고 다른 플로그인 scrollrevealjs 본인한테 맞는 걸로 사용하면 될 듯하다.