jQuery - countup

erica·2023년 1월 10일
0
<div class="counter" data-count="150">0</div>
<div class="counter" data-count="85">0</div>
<div class="counter" data-count="2200">0</div>

<style>
body {
  background-color: #F46A6A;
  color:#fff;
  max-width:800px;
  margin: 100px auto 0;
  text-align: center;
  display: table;
}

.counter {
  display: table-cell;
  margin:1.5%;
  font-size:50px;
  background-color: #FF6F6F;
  width:200px;
  border-radius: 50%;
  height:200px;
  vertical-align: middle;
}
</style>
<script>
$('.counter').each(function() {
  let $this = $(this),
      countTo = $this.attr('data-count');
  
  $({ countNum: $this.text()}).animate({
    countNum: countTo
  },

  {

    duration: 8000,
    easing:'linear',
    step: function() {
      $this.text(Math.floor(this.countNum));
    },
    complete: function() {
      $this.text(this.countNum);
      //alert('finished');
    }

  });  
  
  

});
</script>

profile
응미씨

0개의 댓글