Simple Number Increment Animation with jQuery - countTo
File Size: | 11.6 KB |
---|---|
Views Total: | 7326 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
countTo is a simple jQuery count-up and countdown plugin which animates decimal number increment / decrement at a specified speed and step.
See also:
- Animating Numbers Counting Up with jQuery Counter-Up Plugin
- Number Increment Animations with jQuery - spincrement
- jQuery Plugin For Counting Up Number While Scrolling - numscroller
- Simple jQuery Plugin For Animating Numbers - Numerator
Basic usage:
1. Include the jQuery countTo plugin after jQuery library as usual.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="build/jquery-countTo.js"></script>
2. Wrap the number you want to count-up or countdown from.
<span class="count-up">0</span> <span class="count-down">100</span>
3. Call the plugin and specify the target number you want to count up or countdown to.
// count up to 100 $(".count-up").countTo(100); // count down to 10 $(".count-down").countTo(10);
4. Custom duration. In this case, the plugin will count up to 100 over 5 seconds (default is 1s)
$(".count-up").countTo(100, {"duration": 5});
5. Custom decimals.
// count up to 100.5 $(".count-up").countTo(100.5, {"decimals": 1});
6. Custom maximum steps.
$(".count-up").countTo(100.5, {"max_steps": 10});
7. Custom minimum steps.
$(".count-up").countTo(100.5, {"min_steps": 5});
This awesome jQuery plugin is developed by lessthan3. For more Advanced Usages, please check the demo page or visit the official website.