jQuery Number Counter On Scroll – Countup.js

The Countup.js is a jQuery Number Counter On Scroll plugin that animates the numerical values by counting up from zero while the user scrolls down the page.

It’s a lightweight and tiny plugin which comes with a size of ~2kb only. The plugins come with nice features which include controlling the animation delay and transition.

By setting the configuration option, you can easily customize it as you want. Furthermore, It uses jQuery Waypoint plugin to trigger the count function when you scroll to a specific number.

In addition, the countup.js support the integers float and formatted numbers. You simply need to add the end number where you want to stop the counter.

Here is how you can define the numbers:

• integers 12345
• floats 0.1234
• formatted numbers 1,234,567.00

How to Use jQuery Number Counter Plugin

To add the plugin into your project, you need to include the necessary jQuery and Way point library before closing the </head> tag.

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>

After that, make sure to Include the jQuery Countup.js script after jQuery.

<script src="jquery.countup.min.js"></script>

Now simply define the container and wrap the numerical values into span HTML element as follows.

<div class="counters">
    <span class="counter">300</span>
    <span class="counter">500</span>
    <span class="counter">800</span>
</div>

Finally, Initialise the Javascrption function and you will see the magic when you scroll down or up the page.

<script>
     $('.counter').countUp();
</script>

Configuration Option

The plugin offers you two different way to configure the options. You can either use the data attributes or can also define the options in the Javascrpoton function.

By using the data attribute you can easily set the time and delay by using the data-counter-time and data-counter-delay.

<span class="counter" 
      data-counter-time="2000" 
      data-counter-delay="10">
      123456789
</span>

If you don’t want to use the attribute then you can use the Javascript option to handle the timer and dealy.

$('.counter').countUp({
  'time': 2000,
  'delay': 10
});

That’s it.