숫자 카운터

<div class="box">
    <div class="boxin"></div>
    <div class="rate" data-rate="80"></div>
</div>

<script src="js/jquery.animateNumber.min.js"></script>

var box = $('.box'),
    boxin = box.find('.boxin'),
    rate = box.find('.rate'),
    rateNum = rate.attr('data-rate');
 boxin.animate({width:rateNum + '%'}, 2000);

//첫번째 
// setInterval(textAni, 100);
// function textAni(){
//     var currentRate = boxin.width() / box.width() * 100;
//     rate.text( Math.ceil(currentRate) + '%');
// }

//두번째 animate 사용자속성 만들어 넣기 
// $({rate:0}).animate({rate:rateNum},{
//     duration:2000,
//     progress:function(){
//         var now = this.rate;
//         rate.text( Math.ceil(now) + '%');
//     }  
// })

//세번째 animate number 플러그인 사용 
var percent_number_step = $.animateNumber.numberStepFactories.append(' %');
$('.rate').animateNumber({
    number: rateNum,
    numberStep: percent_number_step
  },
  {
    easing: 'swing',
    duration: 2000
  }
);

---

스크롤 후 숫자 카운터 

var box = $('.box'),
    boxin = box.find('.boxin'),
    rate = box.find('.rate'),
    rateNum = 0;
    gogo = false;

$(window).scroll(function(){
    var threshold = $('.box').offset().top - 700;
    console.log(threshold);
    if(!gogo){
        if($(window).scrollTop() >= threshold){
            rateNum = rate.attr('data-rate');
            boxin.animate({width:rateNum + '%'}, 1000);
            setInterval(textAni, 100);
            function textAni(){
                var currentRate = boxin.width() / box.width() * 100;
                rate.text( Math.ceil(currentRate) + '%');
            };
            gogo = true;
        }
    }
});