Friday, January 26, 2018

Jquery Animated Number Counter From Zero To Value - Javascript Animation

In this tutorial we are going to discuss how animate number counter from zero to value using  animation JQuery library. Using this jquery number counter plugin you can easily display animation effect, here the animation makes the movement more like a sudden jump from one number to another and thereby produces just an increment effect.

Using animate function JQuery we could perform this animation and below are the options are required to perform animation effect.


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

Lets see the complete example to perform cool javascript animations effect number counter from zero to value.

index.html
<!DOCTYPE html>
<html lang="en">

<head>
 <title>jquery animated number counter from zero to value - javascript animation</title>
    <meta charset="UTF-8">
    <style>
        body {
            background-color: #DCDCDC;
        }
        #container {
            width: 200px;
            border: 1px solid #d6d7da;
            padding: 2px 2px 2px 2px;
            border-radius: 5px;
            font-family: arial;
            line-height: 16px;
            color: #333333;
            font-size: 14px;
            background: #ffffff;
            float: left;
            margin: 5px;
        }
        .count {
            line-height: 60px;
            color: black;
            margin-left: 30px;
            font-size: 25px;
        }
    </style>
</head>

<body>

    <h1> Number of User Online Now </h1>

    <div id="container"><span class="count">200</span>
    </div>

    <div id="container"><span class="count">3300</span>
    </div>

    <div id="container"><span class="count" id="count">20550</span>
    </div>


    <div style="clear:both;">
        <br/>
        <a href="#" >Check Out Our Blog.</a>
    </div>
    <br />
    <script src='js/jquery.min.js'></script>
    <script src="js/index.js"></script>   

</body>

</html>

index.js
$('.count').each(function() {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 5000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
        }
    });
});

jQuery(document).ready(function($) {
 
    setInterval(function() {
        updateValue();
    }, 6000);

});

function updateValue() {

    $('#count').html(Math.floor(Math.random() * (1000 - 1)) + 1);
    $('#count').each(function() {

        $(this).prop('Counter', 0).animate({
            Counter: $(this).text()
        }, {
            duration: 3000,
            easing: 'swing',
            step: function(now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

OUTPUT :

Download Link :
https://github.com/skptricks/php-Tutorials/tree/master/Jquery%20Animated%20Number%20Counter%20From%20Zero%20To%20Value

This is all about jquery animated number counter from zero to value - javascript animation. Please do comment in comment box below in case of any suggestion.




No comments:

Post a Comment