지정된 숫자까지 카운트업하는 숫자 애니메이션
1. 다음의 script를 예를들면 index.php에 넣어주고...해당 페이지에서는 script는 한 번만 들어가면 됩니다.
첨부한 waypoints.min.js와 jquery.counterup.min.js는 js 폴더에 넣어주시면 됩니다.
<!-- 지정된 숫자까지 카운트업하는 숫자 애니메이션 -->
<script>
jQuery(document).ready(function($) {
$('.counter').counterUp({
delay: 10, // 숫자당 돌아가는 속도를 지연시켜주는 요소이며 숫자가 높으면 높을 수록 숫자가 돌아가는 속도가 느려집니다.
time: 1000 // 카운트업 해주는 애니메이션의 전체 지속시간으로 1000일 경우, 1초를 의미합니다.
});
});
</script>
<script src="<?php echo G5_JS_URL; ?>/waypoints.min.js"></script>
<script src="<?php echo G5_JS_URL; ?>/jquery.counterup.min.js"></script>
<!-- 지정된 숫자까지 카운트업하는 숫자 애니메이션 -->
2. 그리고, 이렇게 사용하시면 됩니다. 글씨 크기와 색상은 적당히 조정하시구요
○ 123,456 을 표시할 때 : <span class="counter">123,456</span>
○ Copyright 를 표시할 때 : © <span class="counter">2010</span> ~ <span class="counter">2018</span>
○ free_board(자유게시판)의 게시물 합계를 나타내고자 할 때
<?php
$total = sql_fetch("select count(*) as cnt from g5_write_free_board where wr_is_comment = 0"); //댓글 제외 시 사용
$total = sql_fetch("select count(*) as cnt from g5_write_free_board"); // 댓글 포함 시 사용
echo "<span class='counter'>".number_format($total[cnt])."</span>";
?>
▶ 데모 페이지 보기 → http://bfintal.github.io/Counter-Up/demo/demo.html
첨부파일
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 14개
첨부파일에 waypoints.min.js 포함이 안되어있으니 위소스 추가하시거나 다운받아 js 폴더에 넣어주세요.
waypoints.min.js를 첨부하였습니다.
위의 스크립트를 그대로 사용하시면 되겠습니다.
감사합니다
행복 가득한 하루 되세요~