Milestone Counter

milestone counter animation count on scroll.

HTML

<div class="block">Scroll down to bottom to see counter</div>
<div class="count first-count">0</div>
<div class="count second-count">0</div>

CSS

.block {height: 1000px;background: #eeeeee;text-align:center;font-size:30px;}
.count{text-align:center;width:50%;float:left; padding:30px 0;font-size:30px;}

JavaScript

(function ($) {

    $.fn.visible = function () {

        var $element = $(this).eq(0),
            $win = $(window),
            
            elemTop = $element.position().top,
            elemBottom = elemTop + $element.height(),
            
            winTop = $win.scrollTop(),
            winBottom = winTop + $win.height();
            
        if (elemBottom < winTop) {
            return false;
        } else if (elemTop > winBottom) {
            return false;
        } else {
            return true;
        }        
    };

})(jQuery);

function padNum(num) {
    if (num < 10) {
        return " " + num;
    }
    return num;
}


var $count1 = $('.first-count');
var $count2 = $('.second-count');

// Scrolling Functions
$(window).scroll(function (event) {
    var first = 25; // Count up to 25x for first
    var second = 4; // Count up to 4x for second
    
    function countStuffUp(points, selector, duration) {
        //Animate count
        var $selector = $(selector);
        $selector.addClass('counting');
        
        var $counter = $({
            countNumber: $selector.text()
        }).animate({
            countNumber: points
        }, {
            duration: duration,
            easing: 'linear',
            step: function (now) {
                //console.log(now);
                $selector.data('remaining', (points - now) * (duration / points));
                $selector.text(padNum(parseInt(this.countNumber)));
            },
            complete: function () {
                $selector.removeClass('counting');
                $selector.text(points);
                
            }
        });
        
        $selector.data('counter', $counter);
    }
    
    // Output to div
    $(".first-count").each(function (i, el) {
        var el = $(el);
        if (el.visible() && !el.hasClass('counting')) {
            var duration = el.data('remaining') || 1600;
            console.log('duration', duration);
           ...