[JS] 숫자 카운터 스크립트

🩸 메인 콘텐츠 높이 만큼 스크롤시 각 number_ 클래스에 맞는 수치로 카운트 

Html

<div class="information_box">
	<ul>
		<li>
			<img src="/resources/images/main/imformation_icon_01.png" alt="">
			<span class="line"></span>
			<p>포스코그룹<br/>참여사</p>
			<span class="information_number" id="number_01">0</span>
			<span class="some">개사</span>
		</li>
		<li>
			<img src="/resources/images/main/imformation_icon_02.png" alt="">
			<span class="line"></span>
			<p>포스코그룹<br/>참여인원</p>
			<span class="information_number" id="number_02">0</span>
			<span class="some">명</span>
		</li>
		<li>
			<img src="/resources/images/main/imformation_icon_03.png" alt="">
			<span class="line"></span>
			<p>기부금<br/>누적현황(2013년~)</p>
			<span class="information_number" id="number_03">0</span>
			<span class="some">억원</span>
		</li>
		<li>
			<img src="/resources/images/main/imformation_icon_04.png" alt="">
			<span class="line"></span>
			<p>재단사업<br/>수혜자</p>
			<span class="information_number" id="number_04">0</span>
			<span class="some">명</span>
		</li>
	</ul>
</div>

 

Script

🩸 각 수치마다 class 지정 및 수치 입력

// 숫자 카운터를 초기화하는 함수
function initializeNumberCounters() {
    new numberCounter("number_01", 35);
    new numberCounter("number_02", 38516);
    new numberCounter("number_03", 958);
    new numberCounter("number_04", 58861);
}

 

🩸 main 콘텐츠 높이 만큼 스크롤시 이벤트 실행

// 스크롤 위치를 체크하고 카운터를 초기화하는 함수
function checkScrollPosition() {
    var mainHeight = $('main').outerHeight(); // main 태그의 높이
    if ($(window).scrollTop() >= mainHeight) {
        initializeNumberCounters();
        $(window).off("scroll", checkScrollPosition); // 이벤트 리스너를 제거하여 중복 실행 방지
    }
}

 

🩸 페이지 로드시 체크/실행

// 초기화 함수
function initialize() {
    $(window).on("scroll", checkScrollPosition);
    // 페이지 로드 시점에서도 한 번 체크
    checkScrollPosition();
}

// 문서가 준비되면 초기화 함수 실행
$(document).ready(initialize);