This time I will share jQuery Plugin and tutorial about jQuery Plugin For Animating Numbers – rollNumber, hope it will help you in programming stack.
rollNumber is an easy and tiny jQuery plugin to create an animated counter that animates a numeric value from zero to a new one at a given speed.
See Also:
How to use it:
1. Create a container for the animated counter.
1 |
<div class="counter"></div> |
2. Load the rollNumber plugin after jQuery library.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/js/jquery.rollNumber.js"></script> |
3. Initialize the plugin on the counter container and determine the numberic value that counter will count up towards as follows:
1 |
$('.counter').rollNumber({ |
4. Or specify the number in the data-number attribute in cases where you have multiple counters on a page.
5. Customize the style of the animated counter.
1 |
$('.counter').rollNumber({ |
6. Determine the animation speed. Accepted values: ‘slow’, fast’, or milliseconds. Default: 100.
1 |
$('.counter').rollNumber({ |
7. Determine the time to wait before animating the number. Default: 100.
1 |
$('.counter').rollNumber({ |
8. Customize the character used as the thousands separator. Default: false.
1 |
$('.counter').rollNumber({ |
9. Determine whether to add leading zeros to numbers.
1 |
$('.counter').rollNumber({ |
Changelog:
2020-11-04
2020-08-03
