Dev Blog

스크립트 & 소스코드 공유

실무에서 유용하게 쓰는 스크립트와 코드 조각을 블로그 게시판으로 저장하고 공유합니다.

jQuery jquery.counterup - 스크롤 진입 시 숫자 카운트 애니메이션

페이지 정보

조회 137회 작성일 25-06-21 15:33
jquery.counterup 플러그인으로 요소가 화면에 들어올 때 숫자를 카운트업하는 방법이다. waypoints와 counterup 스크립트를 로드하고 HTML에 class를 지정한 뒤 jQuery로 초기화한다. delay(카운트 지연), time(애니메이션 시간), offset(시작 시점), beginAt(시작 숫자), formatter(숫자 포맷) 등 파라미터를 설명한다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>

<script src="jquery.counterup.min.js"></script>

HTML

With default values from plugin instantiation.

<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>
<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>

jQuery

$('.counter').counterUp();

or with extra parameters

$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
}
});

delay- 每次计数的延迟(以毫秒为单位)

time- 倒计时动画的总时长

offset- 计数器开始的视口百分位数(默认情况下为 100,这意味着它在元素进入视口的那一刻触发)

beginAt- 从其开始计数的数字

formatter- 回调函数用于格式化数字



Let's create something great together.

프로젝트 문의 및 견적 요청은 언제든 환영합니다.