통합검색

Javascript

[Javascript] 카운팅 숫자 효과

  • 2026.07.01 10:42:56
[!]Javascript[/!]
 
////////////////////
// 카운팅
////////////////////
// 숫자 초기화
document.querySelectorAll('.m1 .won .num').forEach((el) => {
    el.dataset.num = (el.textContent || '0').replace(/,/g, '').trim();
    el.textContent = '0';
});
// timeline
m1_tl = gsap.timeline({
    'scrollTrigger' : {
        'trigger' : '.m1 .won',
        'start' : 'top 85%',
        'end' : "bottom bottom",
        'toggleActions' :'play none none reverse'
    }
});
// 카운팅 추가
document.querySelectorAll('.m1 .won .num').forEach((el, index) => {
    const obj = { val: 0 };
    const endValue = parseInt(el.dataset.num, 10) || 0;
    m1_tl.to(obj, {
        val: endValue,
        duration: 1.5,
        ease: 'power1.out',
        snap: { val: 1 },
        onUpdate: function () {
            el.textContent = obj.val.toLocaleString();
        }
    }, index === 0 ? '-=.2' : '<');
});