| 776 |
lars |
1 |
Counter-Up
|
|
|
2 |
==========
|
|
|
3 |
|
|
|
4 |
Counter-Up is a jQuery plugin that *animates* a number from zero (counting up towards it). It supports counting up:
|
|
|
5 |
|
|
|
6 |
* integers `12345`
|
|
|
7 |
* floats `0.1234`
|
|
|
8 |
* formatted numbers `1,234,567.00`
|
|
|
9 |
|
|
|
10 |
Features:
|
|
|
11 |
|
|
|
12 |
* Auto-detect for integers, floats or formatted numbers
|
|
|
13 |
* The plugin will also use the number of decimal places the original number is using.
|
|
|
14 |
* Lightweight: ~1kb
|
|
|
15 |
* Minimal setup
|
|
|
16 |
|
|
|
17 |
*Requires [waypoints.js](http://imakewebthings.com/jquery-waypoints/)*
|
|
|
18 |
|
|
|
19 |
Demo
|
|
|
20 |
====
|
|
|
21 |
|
|
|
22 |
**[DEMO](http://bfintal.github.io/Counter-Up/demo/demo.html)**
|
|
|
23 |
|
|
|
24 |
Usage
|
|
|
25 |
=====
|
|
|
26 |
|
|
|
27 |
**Include**
|
|
|
28 |
|
|
|
29 |
```
|
|
|
30 |
<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
|
|
|
31 |
<script src="jquery.counterup.min.js"></script>
|
|
|
32 |
```
|
|
|
33 |
|
|
|
34 |
**HTML**
|
|
|
35 |
|
|
|
36 |
```
|
|
|
37 |
<span class="counter">1,234,567.00</span>
|
|
|
38 |
<span>$</span><span class="counter">1.99</span>
|
|
|
39 |
<span class="counter">12345</span>
|
|
|
40 |
```
|
|
|
41 |
|
|
|
42 |
**jQuery**
|
|
|
43 |
|
|
|
44 |
```
|
|
|
45 |
$('.counter').counterUp();
|
|
|
46 |
```
|
|
|
47 |
|
|
|
48 |
**or with extra parameters**
|
|
|
49 |
|
|
|
50 |
```
|
|
|
51 |
$('.counter').counterUp({
|
|
|
52 |
delay: 10,
|
|
|
53 |
time: 1000
|
|
|
54 |
});
|
|
|
55 |
```
|
|
|
56 |
|
|
|
57 |
`delay` - The delay in milliseconds per number count up
|
|
|
58 |
|
|
|
59 |
`time` - The total duration of the count up animation
|
|
|
60 |
|
|
|
61 |
Social Stuff
|
|
|
62 |
============
|
|
|
63 |
|
|
|
64 |
Twitter: [@bfintal](https://twitter.com/bfintal) & [@gambitph](https://twitter.com/gambitph)
|
|
|
65 |
|
|
|
66 |
Google+: <a href='https://plus.google.com/113101541449927918834' rel='author'>+Benjamin Intal</a>
|