Animating Numbers Counting Up with Counter-Up Plugin
File Size: | 87.4 KB |
---|---|
Views Total: | 193599 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Counter Up is a lightweight and easy-to-use jQuery JavaScript plugin that dynamically counts up to a targeted number (from 0) at a specified speed.
Note that the Counter Up v2 has removed the jQuery dependency. You can download the jQuery v1 version here.
See also:
Installation:
# NPM $ npm install counterup2 --save
Basic Usage (v2):
1. Define an end time in the span
tag.
<span class="counter">12345</span> <span class="counter">123.45</span> <span class="counter">12,345.00</span>
2. Import the Counter Up library.
// ES6 import counterUp from 'counterup2'
<!-- Or From The CDN -->
3. Initialize the library and config the duration & delay and we're done.
counterUp(document.querySelector('.counter') { duration: 1000, delay: 16 })
4. The plugin also works with the waypoints plugin that executes the count up animations whenever you scroll to the span
tags.
<script src="waypoints.min.js"></script>
const el = document.querySelector('.counter') new Waypoint( { element: el, handler: function() { counterUp( el ) this.destroy() }, offset: 'bottom-in-view' })
Changelog:
2019-06-03
- V2
This awesome jQuery plugin is developed by bfintal. For more Advanced Usages, please check the demo page or visit the official website.