반복문 "each"로 Auto Number Counting js 구현하기

회사 사이트를 드디어 리뉴얼하게 되었다!!
그 요상한 홈페이지를 안 봐도 되서 좋지만, 이렇게 바쁠 때,, 홈페이지를 바꾸다니ㅠ
바쁘다 바빠!!!

디자인 시안을 보니 애니메이션이 많이 구현되어있는 사이트여서 그 중 Auto Number Counting에 대해 코드를 찾아보았다.

---

html

<section>
	<div class="row flex">
    	<div class="col">
          	<div class="counting" data-count="900000">0</div>
    	</div>
        <div class="col">
          	<div class="counting" data-count="280">0</div>
        </div>
        <div class="col">
          	<div class="counting" data-count="75">0</div>
        </div>
        <div class="col">
        	<div class="counting" data-count="999">0</div>
        </div>
  	</div>
</section>

css

.row.flex {
	display: flex;
	justify-content: space-between;
}
.col {
	width: 150px;
    height: 150px;
}
.col .counting {
	text-align: center;
	font-size: 35px;
	font-weight: 700;
}

js

$(function(){
	$('.counting').each(function() { // .counting에 각각 적용
      var $this = $(this),
      countTo = $this.attr('data-count');
      // $this = 첫번째~네번째 .counting
      // countTo = 첫번째~네번째 .counting의 data-count 속성의 값(90000,280,75,999)

each문 실행하여 각각의 .counting에 이벤트를 발생 시킨다.
.counting이라는 클래스명을 가진 아이들을 변수 $this $this의 속성 "data-count"을 불러오는 변수 countTo로 지정

        $({ countNum: $this.text()}).animate({
            countNum: countTo 
            // countNum: $this.text() = 0, countNum:countTo = 90000, 280, 75, 999
            // 0에서 countNum이 된다
          },
          {
            duration: 3000, // 애니메이션이 완료될때까지 걸리는 시간
            easing:'linear', // 애니메이션 효과 방식
            step: function() { // 움직임 각 스텝별로 실행될 함수
              $this.text(Math.floor(this.countNum));
              // Math.floor -> this.countNum의 값을 정수로 만들어준다
           },
            complete: function() { // 움직임이 멈춘 후 실행될 함수
              $this.text(this.countNum);
              // this.countNum이 $this의 text값이 된다
           }
        });
    });
});

countNum이라는 key에 value값으로 $this에 text로 나타나게 하는데, 애니메이트를 사용하여 countTo 즉 .counting의 속성 "data-count" 속성 값을 text로 나타나게 한다.
어떻게? 3초동안, 일정하게, 정수로, 결과 텍스트는 countNum으로(countTo를 애니메이트 한 것!)

---

Result

---

💡 Study

each : 반복문 / for보다 가독성이 좋고 객체형을 다루기 쉬워 많이 사용

Math.floor : 숫자를 정수로 표현(반올림 X)

: : 프로퍼티(key)에 값(value)을 지정하는 것

var = , : 변수를 한번에 여러 개 설정