js 상승하는 숫자.

 

[ 조건 ]

1. 0 ~ 원하는 숫자까지 1초동안 증가시킬 것 + 화면에 바로 노출되어야 함.

2. 화면이 위에서 아래로 이동한 경우 ( 스크롤 ) 에만 1번 실행되어야 한다.

3. 특정 위치에 가면 초기화되어 숫자가 다시 상승해야 한다.

4. 상승하는 영역에서 페이지가 새로고침된 경우 숫자 상승, 상승하는 영역 하단에서 페이지가 새로고침된 경우 숫자 상승.

5. 숫자는 콤마가 추가되어야 한다.

 

...
<!-- motionReset위치에서 초기화 시키고 싶다. -->
<div id="motionReset"></div>

...

<div class="count_txt" data-start="0" data-end="600">0</div>
<div class="count_txt" data-start="0" data-end="4500">0</div>
<div class="count_txt" data-start="0" data-end="2500">0</div>

...

 

 

const countTxtList = document.querySelectorAll('.count_txt');
const duration = 1000; //1초 동안
const numberFormatter = new Intl.NumberFormat('ko-KR');//콤마추가
let animationStarted = false;//애니메이션 시작 여부를 추적하는 플래그

function updateCounter (countTxtList,start_data,end_data){
	let startTime;//애니메이션 시작 시간을 변경할 변수
	
	function animateCounter(currentTime){
		
		if(!startTime){
			startTime = currentTime;
		}
		
		const elapsed = currentTime - startTime; //elapsed : 경과시간
		const progress = Math.min(elapsed / duration, 1); //진행률 0~1
		const count = Math.floor(progress * end_data); //end_data까지 숫자 증가
		const formattedCount = numberFormatter.format(count);
		countTxtList.textContent = formattedCount; //카운트 화면에 노출
		
		if(progress < 1){ //진행률이 1이 아니면 반복
			requestAnimationFrame(animateCounter);
		}else if(progress <= 1){//카운터 종료 시
			animationStarted = true;//스크롤 마다 실행 방지
		}
		
	}

	requestAnimationFrame(animateCounter);
		
}

window.addEventListener('scroll',() => {

	//아래로 스크롤하는 경우에만 실행
	if(window.scrollY > 0){		
		
		if(!animationStarted){ //애니메이션이 실행되지 않았다면
			
			for(let i=0; i < countTxtList.length; i++){

				let start_data = countTxtList[i].dataset.start; //시작 숫자
				let end_data = countTxtList[i].dataset.end; //종료 숫자

				updateCounter (countTxtList[i], start_data, end_data);
			}
			
		}else{
			
			//애니메이션 초기화
			var motionResetArea = document.querySelector("#motionReset").offsetTop;
			if((window.scrollY + window.innerHeight <= motionResetArea) && animationStarted){
				animationStarted = false;
			}
			
		}
		
	}


});