Using animations on a website is one of the best ways to create a visual impression. In this article, we’re going to create an animated number counter using JQuery.
Requirements
- JQuery
Using JQuery animate function, it’s very easy to create an animated number counter.
0
You can create the above displayed animation using the following code.
<!DOCTYPE html>
<html>
<head></head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="item-animate">
<h2 class="code">0</h2>
</div>
<script>
$({ countNum: $('.code').html() }).animate({ countNum: 4000 }, {
duration: 8000,
easing: 'linear',
step: function () {
$('.code').html(Math.floor(this.countNum) + "+");
},
complete: function () {
$('.code').html(this.countNum + "+");
//alert('finished');
}
});
</script>
</body>
</html>Download source code and demo
Your subscription could not be saved. Please try again.
Hey, We've sent an email to your inbox with the download link. If you did not receive the email, please wait for a few minutes and check the spam folder or promotions tab.
Here’s a video tutorial:
Related posts:
Creating a responsive counter section
In my previous post about JQuery animation, I showed how to create a simpleanimated number counter[https://www.geekinsta.com/animated-number-counter-using-jquery/]. In thisarticle, we’ll learn how to create a responsive counter section on your webpage. In this example, I’m using * Bootstrap 4…
