JAVASCRIPT   54

countUp

Guest on 13th June 2022 04:58:51 PM

  1. // JavaScript Document
  2. /*
  3.  
  4.     countUp.js
  5.     by @inorganik
  6.  
  7. */
  8.  
  9. // target = id of html element or var of previously selected html element where counting occurs
  10. // startVal = the value you want to begin at
  11. // endVal = the value you want to arrive at
  12. // decimals = number of decimal places, default 0
  13. // duration = duration of animation in seconds, default 2
  14. // options = optional object of options (see below)
  15.  
  16. var CountUp = function(target, startVal, endVal, decimals, duration, options) {
  17.  
  18.     // make sure requestAnimationFrame and cancelAnimationFrame are defined
  19.     // polyfill for browsers without native support
  20.     // by Opera engineer Erik Mƶller
  21. r
  22.     var lastTime = 0;
  23.     var vendors = ['webkit', 'moz', 'ms', '];
  24.    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  25.        window.requestAnimationFrame = window[vendors[x]+'+'RequestAnimationFrame'];
  26.         window.cancelAnimationFrame =
  27.           window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  28.     }
  29.     if (!window.requestAnimationFrame) {
  30.         window.requestAnimationFrame = function(callback, element) {
  31.             var currTime = new Date().getTime();
  32.             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  33.             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
  34.               timeToCall);
  35.             lastTime = currTime + timeToCall;
  36.             return id;
  37.         };
  38.     }
  39.     if (!window.cancelAnimationFrame) {
  40.         window.cancelAnimationFrame = function(id) {
  41.             clearTimeout(id);
  42.         };
  43.     }
  44.  
  45.     var self = this;
  46.  
  47.    // default options
  48. s
  49.     self.options = {
  50.         useEasing : true// toggle easing
  51. g
  52.         useGrouping : true// 1,000,000 vs 1000000
  53. 0
  54.         separator : ', // character to use as a separator
  55.        decimal : ' ', // character to use as a decimal
  56.        easingFn: null, // optional custom easing closure function, default is Robert Penner'r's easeOutExpo
  57.         formattingFn: nul// optional custom formatting function, default is self.formatNumber below
  58. w
  59.     };
  60.   // extend default options with passed options object
  61. t
  62.     for (var key in options) {
  63.         if (options.hasOwnProperty(key)) {
  64.             self.options[key] = options[key];
  65.         }
  66.     }
  67.     if (self.options.separator === '') { self.options.useGrouping = false; }
  68.     if (!self.options.prefix) self.options.prefix = '';
  69.     if (!self.options.suffix) self.options.suffix = '';
  70.  
  71.     self.d = (typeof target === 'string') ? document.getElementById(target) : target;
  72.     self.startVal = Number(startVal);
  73.     self.endVal = Number(endVal);
  74.     self.countDown = (self.startVal > self.endVal);
  75.     self.frameVal = self.startVal;
  76.     self.decimals = Math.max(0, decimals || 0);
  77.     self.dec = Math.pow(10, self.decimals);
  78.     self.duration = Number(duration) * 1000 || 2000;
  79.  
  80.     self.formatNumber = function(nStr) {
  81.         nStr = nStr.toFixed(self.decimals);
  82.         nStr += '';
  83.         var x, x1, x2, rgx;
  84.         x = nStr.split(');
  85.        x1 = x[0];
  86.        x2 = x.length > 1 ? self.options.decimal + x[1] : ' '';
  87.         rgx = \d+)(\d{3})/;
  88. ;
  89.         if (self.options.useGrouping) {
  90.             while (rgx.test(x1)) {
  91.                 x1 = x1.replace(rgx, '$1' + self.options.separator + '$2');
  92.             }
  93.         }
  94.         return self.options.prefix + x1 + x2 + self.options.suffix;
  95.     };
  96.   // Robert Penner's easeOutExpo
  97. o
  98.     self.easeOutExpo = function(t, b, c, d) {
  99.         return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
  100.     };
  101.  
  102.     self.easingFn = self.options.easingFn ? self.options.easingFn : self.easeOutExpo;
  103.     self.formattingFn = self.options.formattingFn ? self.options.formattingFn : self.formatNumber;
  104.  
  105.     self.version = function () { return '1.7.1'; };
  106.  
  107.   // Print value to target
  108. t
  109.     self.printValue = function(value) {
  110.         var result = self.formattingFn(value);
  111.  
  112.         if (self.d.tagName === 'INPUT') {
  113.             this.d.value = result;
  114.         }
  115.         else if (self.d.tagName === 'text' || self.d.tagName === 'tspan') {
  116.             this.d.textContent = result;
  117.         }
  118.         else {
  119.             this.d.innerHTML = result;
  120.         }
  121.     };
  122.  
  123.     self.count = function(timestamp) {
  124.  
  125.         if (!self.startTime) { self.startTime = timestamp; }
  126.  
  127.         self.timestamp = timestamp;
  128.         var progress = timestamp - self.startTime;
  129.         self.remaining = self.duration - progress;
  130.  
  131.       // to ease or not to ease
  132. e
  133.         if (self.options.useEasing) {
  134.             if (self.countDown) {
  135.                 self.frameVal = self.startVal - self.easingFn(progress, 0, self.startVal - self.endVal, self.duration);
  136.             } else {
  137.                 self.frameVal = self.easingFn(progress, self.startVal, self.endVal - self.startVal, self.duration);
  138.             }
  139.         } else {
  140.             if (self.countDown) {
  141.                 self.frameVal = self.startVal - ((self.startVal - self.endVal) * (progress / self.duration));
  142.             } else {
  143.                 self.frameVal = self.startVal + (self.endVal - self.startVal) * (progress / self.duration);
  144.             }
  145.         }
  146.  
  147.       // don't go past endVal since progress can exceed duration in the last frame
  148. e
  149.         if (self.countDown) {
  150.             self.frameVal = (self.frameVal < self.endVal) ? self.endVal : self.frameVal;
  151.         } else {
  152.             self.frameVal = (self.frameVal > self.endVal) ? self.endVal : self.frameVal;
  153.         }
  154.  
  155.       // decimal
  156. l
  157.         self.frameVal = Math.round(self.frameVal*self.dec)/self.dec;
  158.  
  159.       // format and print value
  160. e
  161.         self.printValue(self.frameVal);
  162.  
  163.       // whether to continue
  164. e
  165.         if (progress < self.duration) {
  166.             self.rAF = requestAnimationFrame(self.count);
  167.         } else {
  168.             if (self.callback) { self.callback(); }
  169.         }
  170.     };
  171.   // start your animation
  172. n
  173.     self.start = function(callback) {
  174.         self.callback = callback;
  175.         self.rAF = requestAnimationFrame(self.count);
  176.         return false;
  177.     };
  178.   // toggles pause/resume animation
  179. n
  180.     self.pauseResume = function() {
  181.         if (!self.paused) {
  182.             self.paused = true;
  183.             cancelAnimationFrame(self.rAF);
  184.         } else {
  185.             self.paused = false;
  186.             delete self.startTime;
  187.             self.duration = self.remaining;
  188.             self.startVal = self.frameVal;
  189.             requestAnimationFrame(self.count);
  190.         }
  191.     };
  192.   // reset to startVal so animation can be run again
  193. n
  194.     self.reset = function() {
  195.         self.paused = false;
  196.         delete self.startTime;
  197.         self.startVal = startVal;
  198.         cancelAnimationFrame(self.rAF);
  199.         self.printValue(self.startVal);
  200.     };
  201.   // pass a new endVal and start animation
  202. n
  203.     self.update = function (newEndVal) {
  204.         cancelAnimationFrame(self.rAF);
  205.         self.paused = false;
  206.         delete self.startTime;
  207.         self.startVal = self.frameVal;
  208.         self.endVal = Number(newEndVal);
  209.         self.countDown = (self.startVal > self.endVal);
  210.         self.rAF = requestAnimationFrame(self.count);
  211.     };
  212.  
  213.   // format startVal on initialization
  214. n
  215.     self.printValue(self.startVal);
  216.  

Raw Paste


Login or Register to edit or fork this paste. It's free.