countUp

Hiệu ứng tăng dần giá trị số

by baivong

HTML

<p class="countUpMe" data-endVal="86.4">0</p>
<p class="countUpMe" data-endVal="4236.2">0</p>
<p class="countUpMe" data-endVal="9.5">0</p>
<p class="countUpMe" data-endVal="546.3">0</p>

JavaScript

$('.countUpMe').each(function() {
    // no need to specify options unless they differ from the defaults
    var target = this;
    var endVal = parseInt($(this).attr('data-endVal'));
    theAnimation = new countUp(target, 0, endVal, 1, 2.5);
    theAnimation.start();
});

// countUp.min.js
function countUp(a,b,c,d,e,f){this.options=f||{useEasing:!0,useGrouping:!0,separator:",",decimal:"."};for(var g=0,h=["webkit","moz","ms"],i=0;i<h.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[h[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h[i]+"CancelAnimationFrame"]||window[h[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var c=(new Date).getTime(),d=Math.max(0,16-(c-g)),e=window.setTimeout(function(){a(c+d)},d);return g=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)});var j=this;this.d="string"==typeof a?document.getElementById(a):a,this.startVal=Number(b),this.endVal=Number(c),this.countDown=this.startVal>this.endVal?!0:!1,this.startTime=null,this.timestamp=null,this.remaining=null,this.frameVal=this.startVal,this.rAF=null,this.decimals=Math.max(0,d||0),this.dec=Math.pow(10,this.decimals),this.duration=1e3*e||2e3,this.easeOutExpo=function(a,b,c,d){return 1024*c*(-Math.pow(2,-10*a/d)+1)/1023+b},this.count=function(a){null===j.startTime&&(j.startTime=a),j.timestamp=a;var b=a-j.startTime;if(j.remaining=j.duration-b,j.options.useEasing)if(j.countDown){var c=j.easeOutExpo(b,0,j.startVal-j.endVal,j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.easeOutExpo(b,j.startVal,j.endVal-j.startVal,j.duration);else if(j.countDown){var c=(j.startVal-j.endVal)*(b/j.duration);j.frameVal=j.startVal-c}else...