지정된 숫자까지 카운트업하는 숫자 애니메이션 > 그누보드5 팁자료실

매출이 오르면 내리는 수수료! 지금 수수료센터에서 전자결제(PG)수수료 비교견적 신청해 보세요!

그누보드5 팁자료실

지정된 숫자까지 카운트업하는 숫자 애니메이션 정보

지정된 숫자까지 카운트업하는 숫자 애니메이션

첨부파일

js_파일 2개.zip (3.4K) 440회 다운로드 2018-05-18 08:38:20

본문

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

추천
3

댓글 14개

<script src="//cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
첨부파일에 waypoints.min.js 포함이 안되어있으니 위소스 추가하시거나 다운받아 js 폴더에 넣어주세요.
페이지에 적용시킬건데 them을 쓰고있다면 어디폴더의 js에 스크립트를 집어넣어야되나요?? 페이지에도 스크립트코드를 넣어야되는건가요? 초보라 좀 더 자세히 설명해주실분 계신가요? ㅠㅠ
전체 2,431 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT