[jquery] 숫자 카운트 애니메이션 스크립트

숫자가 촤라라락 올라가면서 짠~ 하고 보여지는 애니메이션 스크립트.

화면 하단에 위치해서 초기 이벤트가 안보일 경우를 대비해

스크롤로 해당 요소에 갔을때 이벤트 실행되도록 하는 함수.

 

<span class="money_nums" data-count="150000">0</span>

function animateCount($element) {
        $element.each(function () {
            var $this = $(this),
                countTo = $this.attr('data-count');

            // 0에서 data-count 값까지 애니메이션 시작
            $({ countNum: 0 }).animate(
                {
                    countNum: countTo,
                },
                {
                    duration: 2000, // 애니메이션 지속 시간 (밀리초)
                    easing: 'linear', // 애니메이션 easing 옵션
                    step: function () {
                        // 현재 값을 설정 (소수점 제거)
                        $this.text(Math.floor(this.countNum));
                    },
                    complete: function () {
                        // 애니메이션 완료 시 정확한 값을 설정
                        $this.text(this.countNum.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));//3자리 마다 콤마 표시 적용
                    },
                }
            );
        });
    }
    // 화면에 요소가 보이는지 확인하고 애니메이션을 시작하는 함수
    function checkIfInView() {
        var $count = $('.money_nums');
        var windowHeight = $(window).height();
        var scrollTop = $(window).scrollTop();
        var elementOffset = $count.offset().top;
        var distance = elementOffset - scrollTop;

        // 요소가 뷰포트 내에 있는지 확인
        if (distance <= windowHeight && distance >= 0) {
            animateCount($count); // 요소가 뷰포트에 보이면 애니메이션 시작
            $(window).off('scroll', checkIfInView); // 애니메이션이 시작되면 스크롤 이벤트를 해제
        }
    }
    $(window).on('scroll', checkIfInView); // 스크롤 이벤트 등록
    checkIfInView(); // 페이지 로드시 확인
    //----------------------------------------------------------------