jQuery Counter
A jQuery plugin to count up a number with start on element visible feature
Getting Started
1. Install package using NPM or download it from the repository;
npm install jquery-counter --save
jQuery and Counter
2. Require<script src="jquery.min.js"></script>
<script src="jquery.counterup.min.js"></script>
or
require('jquery');
require('jquery-counter');
4. Add data attributes
<span data-counter data-offset="100" data-duration="1000" data-delay="1000">400</span>
Through data properties you can set the following parameters:
Prop | Type | Default | Note |
---|---|---|---|
offset |
String |
200 | Element top offset (in pixels) based on view top offset to start the animation |
duration |
String |
3000 | Time (in milliseconds) to count it up |
delay |
String |
200 | Delay (in milliseconds) to start the animation as per the element becomes visible |
5. Call Counter
$('[data-counter]').counter();
JavaScript Options
$('[data-counter]').counter({
decimals: 0,
decPoint: ".",
thousandsSep: ","
});
Methods
$('[data-counter]').counter('bind');