Saturday, November 08, 2014

jQuery Animated Number Counter From Zero To Value - Javascript Animation

New updated tutorial is here, with lot of formating and theme support.

JQuery is powerful Library of JavaScript , Which makes the Web Development more Faster comparing plain JavaScript and completely useful for Beginners for building such application in minutes with lot of Functions in single line.And most powerful feature is JQuery Ajax which makes the users to relaxful usage of web app without page reloading and easy for developers to work with callbacks.Jquery is also famous for it's Animation and making app more amazing and pleasing with speed, fade etc..
There are also lot of library which are built upon JQuery as Library,such as Bootstrap and so on.




Install : Demo & Download


You must need Jquery.js library use just cdn from google.


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


Jquery:

Using animate function JQuery we could perform this animation,here is the actual Documentation

  • first argument is CSS property ,which we would generally used to animate.
  • second argumet as option
option : 

  1. duration  : amount of time in milliseconds for the animation occurance
  2. easing  : easing function for transition 
  3. step : This function provides an opportunity to modify the Tween object to change the value of the property before it is set.

Logic css with Javascript :

We get the count span counter CSS property starting from zero within a for each loop in jquery and setting the Counter as text by CSS property inside animation function and next comes option which has SWING as transition and then with duration and finally comes step option which is used to once again change the value before set and rounded off with math.ceil function.

Code and Demo :

Demo might load slow.have a look at demo hosted +codepen.ReRun the Code to see the counter changes!

$('.Count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
See the Pen FatiB by s.shivasurya (@shivasurya) on CodePen.


Hope You have Enjoyed this post.Since it was cool one actually showing up in most of the modern websites , which made me to search and compile to perform this animated counter.and a reader too requested via me in Facebook to do with JQuery.

For Errors/Comments/Bugs/Hugs mail me [email protected] or connect with me in Facebook/Twitter you can raise your exceptions/messages!
share is care.

10 comments:

Anthony said...

If I am pulling in the numbers into to count span from the database, versus hard coding the numbers in, the function does not seem to work. It only returns "NaN" for the numbers. Any reason why that is?

s.shivasurya said...

can u share the code here !

shivasurya said...

How can I make the counter start with an on click button

shivasurya said...

Thank you so much! :)

shivasurya said...

I have the same question. It's driving me crazy!!

shivasurya said...

Just seen your Article, it amazed me and surpised me with god thoughts that eveyone will benefit from it. It is really a very informative post for all those budding entreprenuers planning to take advantage of post for business expansions. You always share such a wonderful articlewhich helps us to gain knowledge .Thanks for sharing such a wonderful article, It will be deinitely helpful and fruitful article.
Thanks
DedicatedHosting4u.com

shivasurya said...

hi shivasurya, the animation working great. i have one facing one issue for reducing the animation like smooth animation. it's possible with this script. thanks

shivasurya said...

This needs to have with a dot 50.5 and comma 1,130

shivasurya said...

Good Job Shiva,

Can i achieve the same showing the numbers but coming from the Database. Using PHP and MYsql

shivasurya said...

Hi Shiva,


How can I do this with ACF Pro?

Post a Comment

feel free to post your comments! Don't Spam here!