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

Firstly, you need download this script countUp.js and install Custom HTML module.

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!

You may also like

How to upload and attach files to Joomla articles

K2 to Content Migration

The Best Articles Comment Extensions on Joomla 4

Say something here...
You are a guest ( Sign Up ? )
or post as a guest
Loading comment... The comment will be refreshed after 00:00.

Be the first to comment.


Powered By JLex Comment.