[Counter-Up] 지정된 숫자까지 카운트업, 숫자애니메이션

[Counter-Up] 지정된 숫자까지 카운트업, 숫자애니메이션

지정된 숫자까지 카운트업을 시켜주는 제이쿼리 플러그인입니다. 

다른 카운트업 플러그인은 적용시켰을 때 하단에 있다하더라도 메인화면이 뜨자마자 실행이 되어버려서 

스크롤을 내려 하단에 갔을 때는 이미 실행된 뒤라 애니메이션 효과를 기대하기가 힘들었는데, 

이 플러그인은 지정된 숫자까지 타이머처럼 숫자가 휘리릭 돌아가는 애니메이션 효과와 더불어 

화면에 숫자가 드러나야만 실행이 된다는 장점이 있습니다. 

하단에 적용했다하더라도 스크롤이 하단으로 내려가서 화면에 숫자가 나타나야지만 실행이 된다는 거죠. 

https://github.com/bfintal/Counter-Up

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

다운로드 페이지가 열리지 않는다면 다운로드할 수 있는 파일을 올려둘테니 여기서 다운로드 받아주시면 됩니다.

Counter-Up-master.zip

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>

waypoint는 스크롤 할 때 해당 위치서 실행시킬 수 있도록 구현해주는 스크립트입니다. 

전부 ctrl+c, ctrl+v해서 </head> 안이나 </body> 안에 넣어주세요. 

html 안에는 숫자를 넣어야할 곳에 class를 "counter"라고 넣어주시면 됩니다. 

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>

그 다음, 아래의 스크립트도 ctrl+c, ctrl+v해서 같이 넣어주시면 됩니다.

$('.counter').counterUp({
    delay: 10,
    time: 1000
});




 




delay는 숫자당 돌아가는 속도를 지연시켜주는 요소이며  숫자가 높으면 높을 수록 숫자가 돌아가는 속도가 느려집니다.  

time은 카운트업 해주는 애니메이션의 전체 지속시간으로 1000일 경우, 1초를 의미합니다. 

이 부분을 생각하고 설정하게 되면 원하는 속도로 숫자가 돌아가게 되죠.




데모 페이지 들어가보기

내용을 정리해두긴 했지만 해당 페이지에 다 나와있는 내용을 고스란히 가져온거라 

보시고서 응용적인 부분에서는 이해가 가지 않는 부분이 있을 수도 있습니다. 해당 부분은 github에서 참고 부탁드립니다.