This time I will share jQuery Plugin and tutorial about Animated Number Counter That Runs When Visible, hope it will help you in programming stack.
A tiny and configurable jQuery number counter plugin for counting up or counting down to the desired number when the counter element is scrolled into view.
How to use it:
1. Download and insert the multi-animated-counter.js script after jQuery.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/multi-animated-counter.js"></script> |
2. Create a counter element and use the data-TargetNum attribute to determine the number you want to countup to.
3 |
data-TargetNum="98765"> |
3. Determine the animation speed using the data-Speed attribute. Default: 3000ms.
4. Reverse the counter to create a countdown animation.
4 |
data-Direction="reverse"> |
5. Apply an easing function to the animation. ‘linear’ or ‘swing’.
6. Add counter groups to the page as follows:
02 |
<div class="counter" data-TargetNum="10" data-Speed="6000"></div> |
03 |
<div class="counter" data-TargetNum="7" data-Speed="7000" |
04 |
data-Direction="reverse" data-Easing="linear"></div> |
05 |
<div class="counter" data-TargetNum="80333" data-Speed="2500">0</div> |
09 |
<div class="counter" data-TargetNum="4200" data-Speed="1000">0</div> |
10 |
<div class="counter" data-TargetNum="4500" data-Speed="4000">0</div> |
11 |
<div class="counter" data-TargetNum="4743">0</div> |
15 |
<div class="counter" data-TargetNum="5200" data-Speed="1000">0</div> |
16 |
<div class="counter" data-TargetNum="5500" data-Speed="4000">0</div> |
17 |
<div class="counter" data-TargetNum="5743">0</div> |
7. Default global settings.
2 |
let visibilityIds = ['#counters_1', '#counters_2', '#counters_3']; |
5 |
let counterClass = '.counter'; |
8 |
let defaultSpeed = 3000; |
This awesome jQuery plugin is developed by pablog1. For more Advanced Usages, please check the demo page or visit the official website.
