You'll see on many websites, some numbers are counting up quickly. In a webapge - fun facts, satisfied clients, our products, total clients these sections are creating with counter up. It's expanding user experience.
You will find a lot of javascript code for making counter up, but today I will show counter up with the best easiest way with jQuery .
Most of the code will not work which you will find internet. But this code tested by me and I have used it in many websites. It's error free and no hack codes. No back links. I've collected it from Github. So you can use it safely.
Features:
1. Auto-detect for integers, floats or formatted numbers
2. The plugin will also use the number of decimal places the original number is using .
3. Lightweight: ~1kb
4. Minimal setup
Also need to add Waypoint JS. You can get Waypoint JS from here - http://imakewebthings.com/jquery-waypoints
Counter-Up is a jQuery plugin that animates a number from zero (counting up towards it). It supports counting up:
A t firs t add the Javascr ip t code, you can use i t in inline or through to cal l other js file.
. min. js & jquery . counterup . min. js files.
Step 3 : Now take a cl as s counter and put your desires number.
webpage .
That's a ll.
If have problem to use the code, leave a comment below. Moderator team will answer your question.
If you have more codes and tricks and if you want to share in th blog, don't forget to leave a comment or send me a message.
Donwload from Dropbox- https://www.dropbox.com/s/kgx84xs98d31bgd/Counter%20Up.zip?dl=0
For more Tutorials keep visiting our Blog.
Share it in your Facebook, Twitter, Google Plus wall.
Thanks.
<head> <Step 1:script >jQuery ( document). ready( function( $) { $( '. counter'). counterUp ( {delay: 10, time: 1000}); }); </script ></head ><body > <span class="counter">1,234,567</span> <script src="http://cdnjs.cloudflare.com/…/waypoi…/2.0.3/waypoints.min.js"></script> <script src="jquery . counterup . min. js "></script> </body>
Step 2: Then call the waypointsjQuery ( document). ready( function( $) {$( '. counter'). counterUp ( {delay: 10, time: 1000});});
<Step 4: Reload thespan class="counter">1,234,567</span>
That's
