Animated Counter on Scroll Using HTML,CSS and jQuery
Welcome to the Codewithrandom blog. In this blog, we learn how to create an Animated Counter on Scroll Using HTML, CSS, and (jQuery). When you scroll the website there are Animated Counter Start and end in a few seconds. You can change the number of any section if you change the 50 to 100 number in the section so when you scroll the page in the happy customer animated scroll start from 1 to 100.
50+ HTML, CSS & JavaScript Projects With Source Code
I hope you enjoy our blog so let’s start with a basic HTML Structure for the Animated Counter on Scroll.
| Code by | N/A |
| Project Download | Link Available Below |
| Language used | HTML, CSS and jQuery |
| External link / Dependencies | Yes |
| Responsive | Yes |
HTML Code For Animated Counter on Scroll
in this code, we have bootstrap CDN, and jQuery CDN links so use this complete html code in your project so you don’t need to find or link this CDNs link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Counter on Scroll Using HTML,CSS and JavaScript</title>
<!-- ALL IMPORTANT LINK >> DONT FORGET TO ADD -->
<link rel="stylesheet" href="style.css">
<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>
</head>
<body>
<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>
</body>
</html>There is all the HTML Code for the Animated Counter on Scroll. Now, you can see an output without Css and JavaScript. then we write Css for styling and add JavaScript Code for the Animated Counter on Scroll.
5+ HTML CSS Projects With Source Code
Only Html Code Output
CSS Code For Animated Counter on Scroll
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;
}Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Html + Css Updated output
jQuery Code For Animated Counter on Scroll
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 Of Animated Counter on Scroll Using HTML,CSS and jQuery
100+ JavaScript Projects With Source Code ( Beginners to Advanced)
Now that we have completed our Animated Counter on Scroll Using Html, Css, and jQuery. I hope you like the Animated Counter on Scroll Project. 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 HTML, CSS, and jQuery. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.
Written by – Code With Random/Anki
Code by – Contact Us For Credit
Which code editor do you use for this Animated Counter on Scroll coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
is this project responsive or not?
Yes! this is a responsive project
Do you use any external links to create this project?
Yes!
