Adding Count Up Number to your website

This article will show you how to quickly animate your numeric data in a fun way. The numbers will run from start to finish in the set time ???

See Demo

Next, Unzip and copy countUp.js to media/libs folder.

Goto Custom HTML module to config:

In the HTML field, enter the code below:

<script src="/media/libs/countUp.js"></script>

And Code below for JS field:

(function($){
	$(document).ready(function(){
		$('.counter').each(function(){
			var el=$(this), options={}, endVal=0;

			if(typeof el.attr('data-start')!='undefined')
				options.startVal=1*el.attr('data-start');

			if(typeof el.attr('data-duration')!='undefined')
				options.duration=1*el.attr('data-duration');

			if(typeof el.attr('data-end')!='undefined')
				endVal=1*el.attr('data-end');

			if(endVal<=0) return true;

			new countUp.CountUp(el[0], endVal, options).start();
		});
	});
})(jQuery);

Set Module Assignment is On all pages (or pages where you want use count up). Choose a the positioin for this module (usually the footer). You should also hide its title.

Now, in order to insert the count up effect, you use this code in the editor (article or Custom module):

<span class="counter" data-start="<VALUE>" data-end="<VALUE>" data-duration="<VALUE>"></span>

• data-start (optional) - Number to start, default is 0 (zero)
• data-duration (optional) - Animation duration in seconds, default is 2.

Example:

<span class="counter" data-end="3000"></span>

<span class="counter" data-start="1000" data-end="3000"></span>

<span class="counter"data-start="1000" data-end="3000" data-duration="5"></span>

Enjoy!