Simple Number Animation Plugin With jQuery - Counter

File Size: 4.55 KB
Views Total: 5554
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Number Animation Plugin With jQuery - Counter

A really simple and small jQuery counter plugin which animates element's number from zero to a specific value with a fade-in effect.

How to use it:

1. Add jQuery library and the jQuery counter plugin into your html file.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/counter.js"></script>

2. Wrap your numeric text into an inline element like this:

<span class="counter">1234567890</span>

3. Animate the number at a specific speed.

// transform_number(selector, speed, mode); 
transform_number($('.counter'), 200, 'fixed_width'); 

4. Change the animation mode to 'flex'.

// transform_number(selector, speed, mode); 
transform_number($('.counter'), 200, 'flex'); 

This awesome jQuery plugin is developed by Kim-Thomas. For more Advanced Usages, please check the demo page or visit the official website.