숫자 카운트 애니메이션

html

<div class="flex">
	<div class="col">
		<p class="count-num" data-count="777">0</p>
		<p>count 1</p>
	</div>
	<div class="col">
		<p class="count-num" data-count="555">0</p>
		<p>count 2</p>
	</div>
	<div class="col">
		<p class="count-num" data-count="333">0</p>
		<p>count 3</p>
	</div>
</div>

 

css

body {
	background: #FDFFCF;
}

.flex {
	display: flex;
	justify-content: space-between;
	margin: 100px auto;
	width: 50%;
}

.count-num {
  text-align: center;
  font-size: 35px;
  font-weight: 700;
}

 

JS

$('.count-num').each(function() { // .count-num에 각각 적용
  var $this = $(this),
      countTo = $this.attr('data-count');
      // $this = 첫번째~세번째 .count-num
      // countTo = 첫번째~세번째 .count-num의 data-count 속성의 값(777,555,333)
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo 
    // countNum: $this.text() = 0, countNum: countTo = 777, 555, 333
    // 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값이 된다
      //alert('finished');
    }
  });  
});

 

 

결과확인

See the Pen auto counting animation by moondrop0816 (@moondrop0816) on CodePen.

 

 

📝새로 알게된 것

Math.floor()

주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환하는 함수.
소수를 쓰면 가장 가까운 정수를 반환해 준다

 

var $this = $(this), countTo = $this.attr('data-count');

 

자바스크립트 변수 선언시 한번에 여러개의 변수를 선언하는 방법.

var a;  // 선언할때 초기화를 하지않으면 "undefined"값을 가진다
var b = 0;  // 선언과 동시에 초기화가 된다
var c, d; // 한 번에 여러 개의 변수를 함께 선언하는 방법

var e=0, f=0;  // 선언과 초기화를 동시에 설정가능
language = "JavaScript"  // 범위를 따로 지정하지 않으면 전역 변수로 취급

---

제이쿼리 사용한 숫자 카운팅 애니메이션.
each로 각각의 클래스에 이벤트를 걸어줌.
아직 배열은 잘 모르겠는데 좀 더 공부해야겠다😤