Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 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> |