Html-JqueryNo Comments

default thumbnail

Number counter is used to show the animated numbers which will start from 0 to given number. Animated numbers should be started onscroll the page. Here is the code.

HTML

<span class="Count">70</span> Projects
<br/>
<span class="Count">300</span> Clients
<br/>
<span class="Count">500</span> Reviews

Jquery

$(window).scroll(startCounter);
function startCounter() {
    if ($(window).scrollTop() > 200) {
        $(window).off("scroll", startCounter);
        $('.Count').each(function () {
            var $this = $(this);
            jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
                duration: 1000,
                easing: 'swing',
                step: function () {
                    $this.text(Math.ceil(this.Counter));
                }
            });
        });
    }
}

Be the first to post a comment.

Add a comment