This time I will share jQuery Plugin and tutorial about Stylish Incremental Counter Plugin with jQuery, hope it will help you in programming stack.
Incremental Counter is jQuery plugin used for creating a stylish increasing counter that counts up from zero to the number you specify in a DOM element. The animation speed will auto update depending on the remaining numbers.
Basic usage:
1. Add the latest version of jQuery library and the jQuery incremental counter plugin to the webpage.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="jquery.incremental-counter.js"></script> |
2. Specify the number you want to count up to using the data-value attribute.
1 |
<div class="incremental-counter" data-value="2000"></div> |
3. Style the counter with your own CSS styles.
01 |
.incremental-counter .num { |
02 |
background: #f8f8f8 none repeat scroll 0 0; |
03 |
border: 1px solid #fff; |
06 |
display: inline-block; |
17 |
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45); |
18 |
font-family: "Open Sans", Arial, Helvetica, sans-serif; |
21 |
.incremental-counter .num::before { |
4. Active the counter on page load.
1 |
$(".incremental-counter").incrementalCounter(); |
5. Config the length of the number.
1 |
$(".incremental-counter").incrementalCounter({ |
Change log:
2017-05-20
- add digits options and auto digits value
2015-12-30
- add digits options and auto digits value
This awesome jQuery plugin is developed by MikhaelGerbet. For more Advanced Usages, please check the demo page or visit the official website.
