Counting Up To Numerical Values On Scroll - jQuery Countup.js

File Size: 7.6 KB
Views Total: 79373
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Counting Up To Numerical Values On Scroll - jQuery Countup.js

Countup.js is a lightweight (~2kb) jQuery plugin that animates a numerical value by counting up from zero when you scroll to it. The animation delay and transition are fully configurable. It uses jQuery Waypoint plugin to trigger the countUp function when you scroll to a specific number.

See also:

How to use it:

1. Include the necessary jQuery library and the jQuery Waypoint plugin right before the closing body tag.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.waypoints.min.js"></script>

2. Include the jQuery Countup.js script after jQuery.

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

3. Wrap the numerical values into HTML elements as follows. The plugin currently supports integers, floats and formatted numbers.

<span class="counter">1,234,567.89</span>
<span class="counter">99.99</span>
<span class="counter">1234567</span>

4. Call the function and you'll see the magic when you scroll down/up the webpage.

$('.counter').countUp();

5. The plugin provides 2 ways to config the countup animation: via data attributes:

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

6. Or via JavaScript when init.

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

This awesome jQuery plugin is developed by AGMStudio. For more Advanced Usages, please check the demo page or visit the official website.