[라이브러리]CounterUp - 숫자 카운트하며 올라가는 라이브러리

원본 링크 :

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

GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becom

 

사용 소스 :

CountUpExample_mu08.zip

0.00MB

 

01. JQuery, counterup.js 파일 불러오기

(counterup.js파일은 로컬파일로 FTP경로에 업로드 필요)

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script type="text/javascript" src="js/jquery.counterup.min.js"></script>
<script type="text/javascript" src="js/waypoints.min.js"></script>

 

02. 하단에 클래스명 만들고 본문에 클래스 맞춰서 넣기

delay : 숫자 올라가는 모션 속도 조절

time : 몇 초 동안에 로딩될 것인지 조절

<span class="counterUp">26,354</span>
<span class="counterUp">100</span>
<span class="counterUp_02">51,200</span>

<script>
    $(document).ready(function () {
        $('.counterUp').counterUp({
            time: 500
        });
    });

    $(document).ready(function () {
        $('.counterUp_02').counterUp({
            delay: 10,
            time: 2000
        });
    });
</script>

 

Notice.

- 클래스명을 달리 하면 여러 개의 소스를 만들 수 있다.

- delay, time 같은 옵션 뒤에는 세미콜론(;)으로 닫지 않고, 옵션을 두 가지 사용할 경우 쉼표(,)를 사용해야 한다.