[JS] 카운트업(CountUp.js) 사용법

1. 카운트업(CountUp.js)이란?

• 숫자모션을 만들어주는 프레임워크(frameworks)and 플러그인(plugins)입니다.
• Angular, React, Vue, WordPress, jquery 지원 합니다.
• Demo 사이트 https://inorganik.github.io/countUp.js/
• 공식 Github 사이트 https://github.com/inorganik/CountUp.js

2. 사이트 제작하다고 보면 카운트 모션을 사용하고 싶을때가 있습니다.

• 간단한 플레임워크(frameworks)and 플러그인(plugins)을 이용하여 카운트 모션을 만들어 봅시다.
• 카운트모션 제작시 필요한 옵션값외 자세한 설명은 공식 Github사이트에서 확인할수 있습니다.

Options (defaults in parentheses):

interface CountUpOptions {
  startVal?: number; // number to start at (0)
  decimalPlaces?: number; // number of decimal places (0)
  duration?: number; // animation duration in seconds (2)
  useGrouping?: boolean; // example: 1,000 vs 1000 (true)
  useIndianSeparators?: boolean; // example: 1,00,000 vs 100,000 (false)
  useEasing?: boolean; // ease animation (true)
  smartEasingThreshold?: number; // smooth easing for large numbers above this if useEasing (999)
  smartEasingAmount?: number; // amount to be eased for numbers above threshold (333)
  separator?: string; // grouping separator (',')
  decimal?: string; // decimal ('.')
  // easingFn: easing function for animation (easeOutExpo)
  easingFn?: (t: number, b: number, c: number, d: number) => number;
  formattingFn?: (n: number) => string; // this function formats result
  prefix?: string; // text prepended to result
  suffix?: string; // text appended to result
  numerals?: string[]; // numeral glyph substitution
  enableScrollSpy?: boolean; // start animation when target is in view
  scrollSpyDelay?: number; // delay (ms) after target comes into view
  scrollSpyOnce?: boolean; // run only once
}

 

반응형

3. 예제를 확인합니다.

• 예제로 카운트업과 카운트다운을 만들었습니다.
• 카운트 다운시는 startVal 옵션을 사용하여 시작할 숫자를 지정해 줘여 합니다.
  
  

 

이 글이 도움이 되었다면 ♡(공감), 광고 눌러 주세요.
큰 도움이 됩니다.