Hey coders, today I will show how to make these cool animated counters on scroll using HTML,CSS & jQuery.
For those who don't know, jQuery is a Javascript Library. Libraries are basically a file hosted by someone else which has many code examples in it which we can use.
This counters can be used in plenty of ways. One method is allocating a section in your client's website and adding these counters there to show your client's company's achievements throughout their business journey.
Paste the following code in your index.html file:
<!-- Created by CodingPorium,2021. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code -->
<!DOCTYPE html>
<html>
<head>
<title>Responsive Animated Counter on Scroll using HTML CSS & jQuery | CodingPorium</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
box-sizing: border-box;
}
body{
font-family:poppins;
background: royalblue;
}
::selection{
color: #fff;
background: royalblue;
}
/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 5px;
}
.row {margin: 0 -5px;}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 10px;
}
}
/* Style the counter cards */
.box {
background:rgba( 255, 255, 255, 0.25 );
box-shadow:0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter:blur( 4px );
-webkit-backdrop-filter:blur( 4px );
border-radius:10px;
border:1px solid rgba( 255, 255, 255, 0.18 );
padding: 16px;
text-align: center;
color: black;
}
/*Style the counter number*/
.content .box .counter{
font-size: 50px;
font-weight: 500;
color: #f2f2f2;
}
/*Style all counter icons*/
.fa {font-size:50px;color:white;}
</style>
</head>
<body>
<div class="row">
<div class="counter-up">
<div class="content">
<!--Start of Card--><div class="column">
<div class="box">
<div class="icon"><i class="fa fa-user"></i></div>
<div class="counter">926</div>
<div class="text">Working Hours</div>
</div>
</div> <!--End of card-->
<div class="column">
<div class="box">
<div class="icon"><i class="fa fa-check"></i></div>
<div class="counter">731</div>
<div class="text">Projects</div>
</div>
</div>
<div class="column">
<div class="box">
<div class="icon"><i class="fa fa-smile-o"></i></div>
<div class="counter">528</div>
<div class="text">Happy Clients</div>
</div>
</div>
<div class="column">
<div class="box">
<div class="icon"><i class="fa fa-trophy"></i></div>
<div class="counter">64</div>
<div class="text">Awards Received</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.counter').counterUp({
delay: 10,
time: 1200
});
});
</script>
</body>
</html>
Thanks for reading and I hope this project and the code was useful. Do subscribe to our YouTube channel to support us and follow us on Instagram.
Till the next one, goodbye!
Post a Comment