Animated Counter on Scroll | Creating a responsive counter section

Animated Counter on Scroll | Creating a responsive counter section

Welcome🎉 to Code With Random blog. In this blog, we learn how we create an Animated Counter on Scroll. We use HTML, Css, and javascript for this Animated Counter on Scroll. I hope you enjoy our blog so let’s start with a basic HTML structure for the Animated Counter on Scroll.

HTML Code  

Table of Contents

in this code, we have bootstrap CDN,jquery CDN

 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="intro">
<h1>Scroll down to see the animation</h1>
<h1>The animation will start only when the element is visible on the screen</h1>
<h1>Resize the page to see the difference</h1>
</div>
<div class="container-fluid text-center">
<h1>Some cool facts</h1>
<div class="row">
<div class="col-sm-3">
<i class="fa fa-user"></i>
<h2 data-max="50">+ Happy Customers</h2>
</div>
<div class="col-sm-3">
<i class="fa fa-code"></i>
<h2 data-max="25000">+ Lines of code</h2>
</div>
<div class="col-sm-3">
<i class="fa fa-lock"></i>
<h2 data-max="10">+ Projects</h2>
</div>
<div class="col-sm-3">
<i class="fa fa-briefcase"></i>
<h2 data-max="30" id="test">+ Developers</h2>
</div>
</div>
</div>

There is all the HTML code for the Animated Counter on Scroll. Now, you can see an output with an Animated Counter on Scroll then we write javascript for the Animated Counter on Scroll.

output

CSS code

 html,  
body,
div {
padding: 0;
margin: 0;
}
i {
font-size: 4em !important;
margin-top: 10%;
color: teal;
}
h1 {
padding-top: 30px;
color: white !important;
}
h2 {
color: teal;
}
.intro {
height: auto;
min-height: 100vh;
text-align: center;
background-color: teal;
}

Css Updated output

 function inVisible(element) {  
//Checking if the element is
//visible in the viewport
var WindowTop = $(window).scrollTop();
var WindowBottom = WindowTop + $(window).height();
var ElementTop = element.offset().top;
var ElementBottom = ElementTop + element.height();
//animating the element if it is
//visible in the viewport
if ((ElementBottom <= WindowBottom) && ElementTop >= WindowTop)
animate(element);
}
function animate(element) {
//Animating the element if not animated before
if (!element.hasClass('ms-animated')) {
var maxval = element.data('max');
var html = element.html();
element.addClass("ms-animated");
$({
countNum: element.html()
}).animate({
countNum: maxval
}, {
//duration 5 seconds
duration: 5000,
easing: 'linear',
step: function() {
element.html(Math.floor(this.countNum) + html);
},
complete: function() {
element.html(this.countNum + html);
}
});
}
}
//When the document is ready
$(function() {
//This is triggered when the
//user scrolls the page
$(window).scroll(function() {
//Checking if each items to animate are
//visible in the viewport
$("h2[data-max]").each(function() {
inVisible($(this));
});
})
});

Final output



Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Animated Counter on Scroll. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create an Animated Counter on Scroll using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Code by – Contact Us For Credit

Leave a Reply