[라이브러리] CountUp.js 사용법

---

알고있으면 좋은 Tip✨

---

CountUp.js

• 지정된 숫자까지 애니메이션 기능을 통해 동적으로 카운트업 시켜주는 라이브러리이다.
• Angular, React, Vue, WordPress, jquery 지원 한다.
• 데모 사이트 : https://inorganik.github.io/countUp.js/
• 공식 사이트 : https://github.com/inorganik/CountUp.js

 

(1) <script> 태그로 라이브러리 사용하기

import { CountUp } from '../lib/countUp.js';


for(let key in $pinTotalAlarm){
     const $pinTotalAlarmItem = document.createElement('div');
     $pinTotalAlarmItem.classList.add('pin-total-alram');   
                
     const $alrCount = $pinTotalAlarm[key].alrm_count;
     const $displayCount = $alrCount > 99 ? '99+' : $alrCount;

     const $pinCountUp = new CountUp($pinTotalAlarmItem, $displayCount, {
          startVal : 0,  // 시작 값
          endVal : $alrCount,  // 최종 값
          duration : 2,  // 애니메이션 지속 시간 (초)
          separator : '',  // 숫자 사이의 구분 기호 
     });


    // 애니메이션이 끝날 때까지 실행
    $pinCountUp.start();
}

• countUp.js 또는 countUp.min.js (*경량화 파일) 사용한다.
• start() 외에 사용은 하지 않았지만 pauseResume(), reset(), update() 등이 있다.

 

(2)npm 설치 방식

// (1) 간단한 예제
const countUp = new CountUp('targetId', 5234);
if (!countUp.error) {
  countUp.start();
} else {
  console.error(countUp.error);
}

• npm 설치하기 : npm i countup.js
• 참고 사이트 : https://www.npmjs.com/package/countup.js?activeTab=readme