Multi Animated Counter, a small, configurable plugin for jQuery number counter to count or countdown to the desired number when passing a counter item to display.
Key Features:
- Multiple instances on the same page.
- Each dashboard begins when it becomes visible in the viewport.
- Really easy to implement.
- Optional configurable speed for each counter.
- The countdown is available.
- Configurable relief …
How to make use of it:
1. Download and insert the multi-animated-counter.js
script after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/multi-animated-counter.js"></script>
2. Create a counter component and use the data-TargetNum
attribute to find out the number you want to count up to.
<div id="counters_1"> <div class="counter" data-TargetNum="1234"> </div> </div>
3. Determine the animation speed using the data-Speed
attribute.
<div id="counters_1"> <div class="counter" data-TargetNum="1234" data-Speed="5678"> </div> </div>
4. Reverse the counter to create a countdown animation.
<div id="counters_1"> <div class="counter" data-TargetNum="1234" data-Direction="reverse"> </div> </div>
5. Apply an easing function to the animation.
<div id="counters_1"> <div class="counter" data-TargetNum="777+" data-Easing="linear"> </div> </div>
6. Add counter groups to the web page as follows:
<div id="counters_1"> <div class="counter" data-TargetNum="10" data-Speed="6000"></div> <div class="counter" data-TargetNum="7" data-Speed="7000" data-Direction="reverse" data-Easing="linear"></div> <div class="counter" data-TargetNum="80333" data-Speed="2500">0</div> </div> <div id="counters_2"> <div class="counter" data-TargetNum="1234" data-Speed="1000">0</div> <div class="counter" data-TargetNum="5678" data-Speed="4000">0</div> <div class="counter" data-TargetNum="777+">0</div> </div> <div id="counters_3"> <div class="counter" data-TargetNum="4000" data-Speed="1000">0</div> <div class="counter" data-TargetNum="1234" data-Speed="4000">0</div> <div class="counter" data-TargetNum="250+">0</div> </div>
7. Default global settings.
// must be an array, could have only one element let visibilityIds = ['#counters_1', '#counters_2', '#counters_3']; // default counter class let counterClass = '.counter'; // default animation speed let defaultSpeed = 3000;
Simple Animated Counter on Scroll, jquery number counter animation on scroll, Animated Counter Plugin/Github
See Demo And Download
Official Website(pablog1): Click Here
This superior jQuery/javascript plugin is developed by pablog1. For extra Advanced Usages, please go to the official website.
Be First to Comment