Animating Numbers Counting Up with jQuery Counter-Up Plugin

Animating Numbers Counting Up with jQuery Counter-Up Plugin
File Size: 12KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Counter Up is a lightweight and easy-to-use jQuery plugin that dynamically counts up to a targeted number (from 0) at a specified speed.

See also:

Basic Usage:

1. Define an end time in the span tag.

<span class=".integers">12345</span>
<span class=".floats">123.45</span>
<span class=".numbers-with-commas">12,345.00</span>

2. Load the jQuery javascript library and jQuery Counter Up plugin at the end of your document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/jquery.counterup.min.js"></script> 

3. Load the required jQuery waypoints plugin to execute the count up animations whenever you scroll to the span tags.

<script src="waypoints.min.js"></script> 

4. Call the plugin.

<script>
jQuery(document).ready(function( $ ) {
$('span').counterUp({
delay: 10, // the delay time in ms
time: 1000 // the speed time in ms
});
});
</script>

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