project count

In the project count dynamically the window scroll  based calculated . 

content div is the  content to calculated project count

<div class="content-div"><!--- Content-div---Start-->
            <span class="totalproject"></span>
            <span id="label">TOTAL PROJECTS</span>
    </div><!--- Content-div---End-->

the style for the content div given below

 

.totalproject{
 
             text-align:center;
             display:block;
             font-size:20px;   
             margin-right: 185px;
        }
        #label{
 
             text-align:center;
             display:block;
             font-size:16px;
             margin-right: 195px;
        } 
        .content-div {
            width: 25%;
            display: inline-block;
            float: left;
        }

In the count to function called in the window scroll move and count function have the parameters  from, to,speed,refresh interval used 

(function($) {
    $.fn.countTo = function(options) {
        // merge the default plugin settings with the custom options
        options = $.extend({}, $.fn.countTo.defaults, options || {});
 
        // how many times to update the value, and how much to increment the value on each update
        var loops = Math.ceil(options.speed / options.refreshInterval),
            increment = (options.to - options.from) / loops;
 
        return $(this).each(function() {
            var _this = this,
                loopCount = 0,
                value = options.from,
                interval = setInterval(updateTimer, options.refreshInterval);
 
            function updateTimer() {
                value += increment;
                loopCount++;
                $(_this).html(value.toFixed(options.decimals));
 
                if (typeof(options.onUpdate) == 'function') {
                    options.onUpdate.call(_this, value);
                }
 
                if (loopCount >= loops) {
                    clearInterval(interval);
                    value = options.to;
 
                    if (typeof(options.onComplete) == 'function') {
                        options.onComplete.call(_this, value);
                    }
                }
            }
        });
    };
 
    $.fn.countTo.defaults = {
        from: 0,  // the number the element should start at
        to: 100,  // the number the element should end at
        speed: 1000,  // how long it should take to count between the target numbers
        refreshInterval: 100,  // how often the element should be updated
        decimals: 0,  // the number of decimal places to show
        callback: function() {  alert("I'm done!"); },
        onUpdate: null,  // callback method for every time the element is updated,
        onComplete: null,  // callback method for when the element finishes updating
    };
 
 
 
})(jQuery);
 
function count_display(){
 
  jQuery(function($) {
        $('.totalproject').countTo({
            from: 0,
            to: 50,
            speed: 5000,
            refreshInterval: 50,
 
            onComplete: function(value) {
               // console.debug(this);
            }
        });
 
    });

 

Leave a Reply

Your email address will not be published. Required fields are marked *