Hello readers, Today in this blog you’ll learn how to create a Responsive Counter-up Animation on Scroll using HTML CSS & jQuery. Earlier I have shared a blog on Responsive Circular Progress Bar and now it’s time to create Responsive Counter-up Animation for the Website.
Counter Up is a lightweight and easy-to-use jQuery or JavaScript plugin that dynamically counts up a number to a targeted number from 0 at a specified speed and time. In this program [Responsive Counter up Animation on Scroll], there are three sections on the webpage.
In the last section, I’ve shown some details about the author on what he/she has done. When you scroll down slowly then the counter-up animation activates and it starts counts from 0 number to the specified number.
If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Counter up Animation].
Video Tutorial of Responsive Counter up Animation
In the video, you have seen the responsive counter-up animation for the website which is done with the jQuery plugin name CounterUp. With the help of the plugin, there are no vast codes being used so if you’re a beginner then you can also understand the codes behind creating this counting-up animation and also can create this type of animation easily.
This is fully responsive and mobile-friendly. I used CSS @media and Flexbox properties to make it responsive. You can use this animation on your website sections, HTML pages, and many more.
You might like this:
Responsive Counter up Animation [Source Codes]
To create this program (Counter up Animation on Scroll). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Counter up Animation on Scroll | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.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>
</head>
<body>
<div class="section"></div>
<div class="wrapper">
<div class="title">Responsive Counter up Animation HTML CSS & jQuery</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit accusantium, dolor eum ipsum repudiandae repellat sapiente, molestias, dolores explicabo laborum corrupti commodi totam molestiae magni ipsam saepe aut tempore nemo similique? Fuga in minus amet adipisci ipsa incidunt, quam iure aliquid corrupti asperiores, non quibusdam earum debitis dignissimos modi omnis repudiandae praesentium ad sequi veritatis, odio. Nam, unde! Iste consequatur asperiores doloremque aperiam cupiditate optio eum ducimus voluptatibus, animi illo quam dicta inventore dolore ab autem a, obcaecati, reprehenderit. Natus quasi officiis nulla officia rem placeat aut impedit nemo eum voluptatibus, dolores molestias velit, cupiditate magni illo laudantium beatae facere sequi obcaecati, reprehenderit eveniet nam, ea aperiam hic. Est odit, qui. Aliquid saepe molestiae, inventore. Necessitatibus temporibus, dignissimos, nisi repellendus possimus sed incidunt nam quos enim veritatis corporis ut sint, facere vitae, illum accusamus nesciunt dolore. Doloremque nihil sit, alias molestias sint quos voluptatum voluptatibus sunt quisquam, facere quod pariatur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta repellendus illo iste eius molestiae natus, esse incidunt. Minus architecto dicta, provident libero. Ipsum culpa, atque ab. Aut incidunt amet optio quo nemo atque eligendi aperiam quisquam aliquid, distinctio mollitia minima, eius repellendus asperiores vero reprehenderit dolore, consequuntur adipisci tenetur! Enim sed, tempora obcaecati perspiciatis illo ducimus maiores aut quae eos, aspernatur sunt unde, quam a praesentium tenetur est quas eveniet dolorum quibusdam hic placeat! Distinctio nostrum assumenda suscipit cupiditate rem amet repudiandae labore neque quis quia dicta, aliquid eum nemo sint, maxime sunt. Cumque suscipit nulla quis velit iure. Consequuntur, ipsa! Veniam error enim itaque ab unde, accusamus asperiores, ratione, debitis similique suscipit aut, qui consectetur quos repudiandae illo impedit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, sunt ipsum modi. Consectetur nobis vero minus, architecto facere velit explicabo molestiae delectus omnis ad expedita similique inventore placeat incidunt. Sint quasi autem quam illo omnis soluta minus, in quibusdam placeat. Saepe ea magni ducimus, modi, eos quis, at possimus earum ad magnam natus, nihil vero error. Ab ipsum omnis odit ipsam, maxime aspernatur molestiae sit tempore corporis non rerum earum neque voluptatibus provident dolor quod molestias officia. Aspernatur quis magni iste cum quas fugit modi aut ratione repudiandae quaerat eaque blanditiis veritatis quibusdam, reprehenderit eveniet, earum, atque sequi, sunt fugiat?</p>
</div>
<div class="counter-up">
<div class="content">
<div class="box">
<div class="icon"><i class="fas fa-history"></i></div>
<div class="counter">724</div>
<div class="text">Working Hours</div>
</div>
<div class="box">
<div class="icon"><i class="fas fa-gift"></i></div>
<div class="counter">508</div>
<div class="text">Completed Projects</div>
</div>
<div class="box">
<div class="icon"><i class="fas fa-users"></i></div>
<div class="counter">436</div>
<div class="text">Happy Clients</div>
</div>
<div class="box">
<div class="icon"><i class="fas fa-award"></i></div>
<div class="counter">120</div>
<div class="text">Awards Received</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('.counter').counterUp({
delay: 10,
time: 1200
});
});
</script>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.section{
background: url("images/bg-1.jpg") no-repeat;
height: 100vh;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.wrapper{
padding: 20px 50px;
}
.wrapper .title{
font-size: 40px;
font-weight: 600;
margin-bottom: 10px;
}
.wrapper p{
text-align: justify;
padding-bottom: 20px;
}
.counter-up{
background: url("images/bg-2.jpeg") no-repeat;
min-height: 50vh;
background-size: cover;
background-attachment: fixed;
padding: 0 50px;
position: relative;
display: flex;
align-items: center;
}
.counter-up::before{
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
}
.counter-up .content{
z-index: 1;
position: relative;
display: flex;
width: 100%;
height: 100%;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.counter-up .content .box{
border: 1px dashed rgba(255,255,255,0.6);
width: calc(25% - 30px);
border-radius: 5px;
display: flex;
align-items: center;
justify-content: space-evenly;
flex-direction: column;
padding: 20px;
}
.content .box .icon{
font-size: 48px;
color: #e6e6e6;
}
.content .box .counter{
font-size: 50px;
font-weight: 500;
color: #f2f2f2;
font-family: sans-serif;
}
.content .box .text{
font-weight: 400;
color: #ccc;
}
@media screen and (max-width: 1036px) {
.counter-up{
padding: 50px 50px 0 50px;
}
.counter-up .content .box{
width: calc(50% - 30px);
margin-bottom: 50px;
}
}
@media screen and (max-width: 580px) {
.counter-up .content .box{
width: 100%;
}
}
@media screen and (max-width: 500px) {
.wrapper{
padding: 20px;
}
.counter-up{
padding: 30px 20px 0 20px;
}
}
That’s all, now you’ve successfully created a Responsive Counter-up Animation on Scroll using HTML CSS & jQuery. If your code does not work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
Very nice. I did find one problem. If I scroll down and trigger the animation it looks ok, but if I scroll up slightly and scroll down slightly to retrigger the animation the numbers have decreased. Do this this several more times (without going to the top of the page or refreshing) and eventually all counters go to zero. Zero customers is not a great look.
good