728x90
방문자 카운트 효과
티스토리 블로그를 꾸미다가 보면 신기한 기능을 많이 발견하고는 합니다. 그중에 방문자 카운트가 숫자만 보여주는 것이 아니라 애니메이션처럼 보여주는 것도 신기했습니다. 카운트 애니메이션 효과를 적용방법을 알려드리도록 하겠습니다. Github 참고하였습니다.
깃허브에 있는 두 개의 파일이 필요합니다.
- jquery.counterup.js
- jquery.counterup.min.js
파일 준비
깃허브에서 다운로드하셔도 되고, 제가 첨부한 파일을 다운로드하셔도 됩니다.
다운로드하지 않고 사용할 수 있다고 하는데 저는 잘 안되더라고요. CDN을 사용해서 include해도 사용이 가능하다고 합니다.
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
다운로드한 파일을 티스토리 스킨에 업로드합니다.
업로드하시고 적용 버튼 누르시는 거 잊지 마세요.
<script src="./images/jquery.counterup.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
여기까지 완료하였다면, 이제 HTML편집 head 태그 안에 위 스크립트를 붙여 넣습니다.
<script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
만약 jquery가 없으신 분은 jquery도 같이 넣어주셔야 합니다.
스크립트 설정
기존 소스에 Count클래스를 만들고, span태그 추가 후 숫자 부분에만 class를 주었습니다.
<s_sidebar_element>
<!-- 전체 방문자 -->
<div class="count">
<h2>전체 방문자</h2>
<p class="total"><span class="counter">416,344</span></p>
<p>Today : <span class="counter">30</span></p>
<p>Yesterday : <span class="counter">162</span></p>
</div>
</s_sidebar_element>
이제 방문자 카운터가 적용된 모습니다.
Jquery 활용해서 카운터 할 수 있습니다.
<script>
$('.counter').counterUp({
delay: 10, //delay : 숫자당 지연 시간(밀리초) 카운트 업
time: 1000 //time : 카운트 업 애니메이션의 총 지속 시간(밀리초)
});
</scipt>
delay, time 옵션도 자신이 원하는 스타일로 설정하실 수 있습니다.
마무리 팁
<!-- 방문자 수 카운트 시작 -->
<script>
jQuery(document).ready(function($) {
$('.counter').counterUp({
delay: 30,
time: 3000
});
});
</script>
<!-- 방문자 수 카운트 끝 -->
위 소스는 방문자 class에 페이지가 load 되었을 때 자동으로 카운터 될 수 있도록 만든 소스입니다. 그럼 만족하시는 디자인되시기 바랍니다.
728x90