83 lines
1.9 KiB
Markdown
83 lines
1.9 KiB
Markdown
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](http://imakewebthings.com/jquery-waypoints/)*
|
|
|
|
Demo
|
|
====
|
|
|
|
**[DEMO](http://ciromattia.github.io/jquery.counterup/demo/index.html)**
|
|
|
|
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
|