jquery.counterup
jquery.counterup is a jQuery plugin that animates a number from zero (counting up towards it). It supports counting up:
- integers
12345
- floats
0.1234
- formatted numbers
1,234,567.00
- time
21:45:00
Features:
- Auto-detect for integers, floats or formatted numbers.
- The plugin will also use the number of decimal places the original number is using.
- Start counter with a different duration and delay by setting
data-counterup-time=""
and data-counterup-delay=""
. - Lets you use your own formatter.
- Lightweight: ~1kb
- Minimal setup
Requires waypoints.js
Demo
DEMO
Install with Bower
bower install jquery.counterup
=====
Include
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<script src="jquery.counterup.min.js"></script>
HTML
With default values from plugin instantiation.
<span class="counter">1,234,567.00</span>
<span>$</span><span class="counter">1.99</span>
<span class="counter">12345</span>
With values from data
attribute.
<span class="counter" data-counterup-time="1500" data-counterup-delay="30" data-counterup-beginat="100">1,234,567.00</span>
jQuery
$('.counter').counterUp();
or with extra parameters
$('.counter').counterUp({
delay: 10,
time: 1000,
offset: 70,
beginAt: 100,
formatter: function (n) {
return n.replace(/,/g, '.');
});
});
delay
- The delay in milliseconds per number count up
time
- The total duration of the count up animation
offset
- The viewport percentile from which the counter starts (by default it's 100, meaning it's triggered
at the very moment the element enters the viewport)
beginAt
- The number from which to count up
formatter
- A callback to format the number with