Press "Enter" to skip to content

A Moving Number Counter That Works When Visible | Multi Animated Counter

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

    Leave a Reply

    Your email address will not be published. Required fields are marked *