[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션

[animate/waypoints] 스크롤에 반응하는 스크롤 애니메이션

이번에 소개할 제이쿼리 플러그인은, css만으로 애니메이션 효과를 쉽게 구현할 수 있는 animate 제이쿼리 플러그인과 

스크롤을 하면 지정한 위치 영역에 이벤트를 발생시키는 waypoints 제이쿼리 플러그인 이렇게 두가지 입니다. 

waypoints 같은 경우는 앞글, 카운트업(보러가기)의 스크립트 설명 때에 잠시 나왔었는데, 

스크롤에 맞춰 이벤트가 실행되기 때문에 스크롤이 느리게, 혹은 빠르게 내려간다하더라도 

이벤트가 늦게 나오거나 이벤트가 (이미 실행된 뒤이기 때문에 멈춰보이거나 하는 일들이 현저히 줄어들게 됩니다. 

게다가 이미지들이 살아있는 것처럼 움직여주는 animate를 함께 쓰게 되면 웹페이지를 보다 생동감있게 표현할 수 있게 되는거죠.

https://github.com/daneden/animate.css

https://github.com/imakewebthings/waypoints

위 URL로 들어가시면 플러그인을 받을 수 있는 github 다운로드 페이지가 뜹니다. 페이지에서 해당 파일을 다운받아주세요. 

페이지가 열리지 않는다면 여기서 다운받아주세요.

waypoints-master.zip

animate.css-master.zip

waypoints는 lib 폴더 안에 jquery.waypoints.min.js를 가져와주시고 animate는 animate.min.css를 가져와주시면 됩니다. 

각각 받은 파일을 폴더에 넣고 아래 스크립트를 </head> 안의 ctrl+c, ctrl+v 해주세요.

<link rel="stylesheet" href="animate.min.css">
<script src="jquery.waypoints.min.js"></script>

그리고 애니메이션이 들어가야할 영역에 class를 animated라고 표기해주세요.

<div id="blue"> ... </div>
<div id="red" class="animated"> ... </div>
<div id="yellow"> ... </div>

다음은 waypoints를 실행시키기 위한 기본 문법 스크립트입니다.

$(document).ready(function(){
  $('#red').css('opacity', 0);
 
  $('#red').waypoint(function() {
      $('#red').addClass('원하는 애니메이션효과');
  }, { offset: '50%' });
 
});

 원하는 애니메이션 효과라고 써놓은 부분은 

https://daneden.github.io/animate.css/에 들어가셔서 

원하시는 애니메이션 효과를 골라 적용하시면 됩니다. 

 offset 값은 애니메이션이 나타나는 지점을 결정하는 값으로 50%정도로 적용시켜놓으면 

애니메이션이 나와야하는 영역의 맨 앞이 보이는 화면의 50% 스크롤이 이동되고 나서야 이벤트가 적용됩니다.  

예시 페이지는 아래를 참고해주세요.

참조사이트 :  https://spin.atomicobject.com/2015/05/31/scroll-anmiation-css-waypoints/

+ 

해당 소스로 진행했을 때, 내용이 전혀 먹히지 않는다는 문의가 있었습니다.

이 글을 올렸을 당시가 2017년도로 당시 animate.css버전이 3.5.2였는데,

현재는 4.1.1로 업그레이드도 된 데다가 classname이 변경된 사항을 뒤늦게 확인하였습니다.

변경 전 : class="animated" 
변경 후 : class="animate__animated"

변경 전 : fadeInLeft
변경 후 : animate__fadeInLeft

아래는 현재 버전으로 수정된 소스이며,

상세 내용은 https://animate.style/ 사이트에서 확인 부탁드립니다.