jQuery Plugin For Animating Numbers - rollNumber
File Size: | 33.1 KB |
---|---|
Views Total: | 8517 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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:
- Retro Number Rolling/Flipping Effect With jQuery - digitScroller.js
- Smooth Number Rolling Animation In jQuery - numberAnimate.js
- Simple jQuery Plugin To Animate Numeric Text - Animate Numbers
How to use it:
1. Create a container for the animated counter.
<div class="counter"></div>
2. Load the rollNumber plugin after jQuery library.
<script src="/path/to/cdn/jquery.min.js"></script> <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:
$('.counter').rollNumber({ number: 123456 })
4. Or specify the number in the data-number
attribute in cases where you have multiple counters on a page.
<div class="counter" data-number="123456"> </div> <div class="counter" data-number="654321"> </div> ...
5. Customize the style of the animated counter.
$('.counter').rollNumber({ fontStyle: { font-size: 16, color: '#FF0000', font-family: 'Roboto', // more styles here } })
6. Determine the animation speed. Accepted values: 'slow', fast', or milliseconds. Default: 100.
$('.counter').rollNumber({ speed: 200 })
7. Determine the time to wait before animating the number. Default: 100.
$('.counter').rollNumber({ interval: 200 })
8. Customize the character used as the thousands separator. Default: false.
$('.counter').rollNumber({ fsymbol: ',' })
9. Determine whether to add leading zeros to numbers.
$('.counter').rollNumber({ rooms: 9 }) ==> 000123456
Changelog:
2020-11-04
- Bugfix
2020-08-03
- JS updated
This awesome jQuery plugin is developed by Patrick-Jun. For more Advanced Usages, please check the demo page or visit the official website.