UNPKG

jquery.counterup

Version:

jquery.counterup is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.

83 lines (61 loc) 1.97 kB
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