each 메소드를 이용하여 number conuting 구현하기

브랜드 사이트에 사용할 애니메이션 중 number counting 코드 분석

1) 카운팅 방법 1

<!-- html -->
<div>
  <ul>
    <li class="number">99</li>
  </ul>
</div>

<!-- https://jsfiddle.net/woorim0ju/grq7ko1f/1/ -->

// JS
$(function() {
		  var cnt0 = 0;

		  counterFn();

		  function counterFn() {

		    id0 = setInterval(count0Fn, 100);
            		//함수를 실행

		    function count0Fn() {
		      cnt0++;
		      if (cnt0 > 99) {
		        clearInterval(id0);
                // 함수를 종료
		      } else {
		        $(".number").text(cnt0);
		      }
		    }
		  }
		});

//https://jsfiddle.net/woorim0ju/grq7ko1f/1/

1-1)

• setInterval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용
• clearInterval 함수 : setInterval 실행을 clearInterval 이용하여 종료
  실행중인 작업을 중지시키는 것이 아닌 지정된 작업은 모두 실행되고
  다음 작업 스케쥴이 중지 되는 것
  

2) 카운팅 방법 2

<!-- html -->

<section id="counter-stats" class="wow fadeInRight" data-wow-duration="1.4s">
	<div class="container">
		<div class="row">

			<div class="col-lg-3 stats">
				<i class="fa fa-code" aria-hidden="true"></i>
				<div class="counting" data-count="900000">0</div>
				<h5>Lines of code</h5>
			</div>

			<div class="col-lg-3 stats">
				<i class="fa fa-check" aria-hidden="true"></i>
				<div class="counting" data-count="280">0</div>
				<h5>Projects done</h5>
			</div>

			<div class="col-lg-3 stats">
				<i class="fa fa-user" aria-hidden="true"></i>
				<div class="counting" data-count="75">0</div>
				<h5>Happy clients</h5>
			</div>

			<div class="col-lg-3 stats">
				<i class="fa fa-coffee" aria-hidden="true"></i>
				<div class="counting" data-count="999">0</div>
				<h5>Cups of coffee</h5>
			</div>


		</div>
		<!-- end row -->
	</div>
	<!-- end container -->

</section>
<!-- https://codepen.io/shvvffle/pen/JRrLqG -->

//JS

$('.counting').each(function() {//counting 클래스에 이벤트 발생(페이지 로드와 동시에)
  var $this = $(this),
      countTo = $this.attr('data-count'); //data-count의 속성값 불러오기
  
  var countObj = {
  		countNum: $this.text()
  } // countNum의 text의 값은 0
  

  $(countObj).animate({countNum: countTo},{
						//countTo의 값을 담은 변수(90000, 280, 75, 999)
    duration: 3000, //동작이 완료될 때까지 걸리는 시간
    easing:'linear', //동작이 나타나는 방법
    step: function() { //동작 실행
      $this.text(Math.floor(this.countNum)); //정수값으로 출력되는 함수(Math함수)
    },
    complete: function() { //동작 완료
      $this.text(this.countNum);
    }

  });  

});

//https://codepen.io/shvvffle/pen/JRrLqG

2-1)

• each() : 매개 변수로 받은 것을 사용해 for in 반복문과 같이 배열이나 객체의 요소를 검사할 수 있는 메소드
• countTo 변수를 사용하여 data-count의 값을 받음
• Math.floor 함수를 사용하여 정수값만 출력

counting 코드 분석 내용

counting 방법에는 여러가지가 있지만 나는 위 두 개의 예제를 보면서 counting 동작에 대해 이해했다. 코드를 응용하여 적용했을 때 실제로 동작이 정상적으로 실행되는지는 브랜드 사이트를 제작하면서 판단해야 할 것 같다.

추가)

• 제이쿼리 animate에 사용하는 함수 종류

Attribute	Type	Description
easing	String	현재 애니메이션의 easing 설정값을 보여 준다.
elem	DOM Element	현재 애니메이션의 대상요소. (jQuery 랩핑되지 않은 순수 DOM 요소)
end	Number	애니메이션이 종료되는 시점의 값.
now	Number	애니메이션이 재생 되는 동안의 현재의 값.
options	Object	설정한 옵션을 보여 준다.
pos	Number	가속시 사용되는 속도를 표시해 준다. 0~1 사이의 값 출력.
prop	String	현재 재생되는 css의 속성값을 보여준다. top 혹은 left 등.
start	Number	애니메이션의 시작값을 보여준다.
unit	String	애니메이션 재생의 단위를 보여준다. 예를들어 px, em 등이다.