This time I will share jQuery Plugin and tutorial about Animating Numbers Counting Up with Counter-Up Plugin, hope it will help you in programming stack.
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.
Installation:
2 |
$ npm install counterup2 --save |
Basic Usage (v2):
1. Define an end time in the span tag.
1 |
<span class="counter">12345</span> |
2 |
<span class="counter">123.45</span> |
3 |
<span class="counter">12,345.00</span> |
2. Import the Counter Up library.
2 |
import counterUp from 'counterup2' |
3. Initialize the library and config the duration & delay and we’re done.
1 |
counterUp(document.querySelector('.counter') { |
4. The plugin also works with the waypoints plugin that executes the count up animations whenever you scroll to the span tags.
1 |
<script src="waypoints.min.js"></script> |
1 |
const el = document.querySelector('.counter') |
8 |
offset: 'bottom-in-view' |
Changelog:
2019-06-03
This awesome jQuery plugin is developed by bfintal. For more Advanced Usages, please check the demo page or visit the official website.
