Responsive Counter Up Animation using JavaScript

Responsive Counter Up Animation using JavaScript

Responsive Counter Up Animation:

Responsive Counter Up Animation using JavaScript

In this article, you will learn how to create Responsive Counter Up Animation using HTML CSS, and JavaScript. We use javascript Counter Up Animation in many places. For different types of personal websites, business websites, etc. 

This type of responsive counter up animation is most commonly used in business websites. For example, you can use this project in case you want to show the quantity of any product on your business website.

30 OTP input fields using HTML, CSS, and JS

Count animation is used between the numbers here. This type of Responsive Counter Up Animation is often used by developers to create queries. But if you want you can make it with the help of simple javascript. This tutorial will show you how to create JavaScript Counter Up Animation.

JavaScript Counter Up Animation

Html, CSS, and javascript have been used to create this Counter Up Animation JavaScript. A very simple code is used here for beginners.

Below is a preview of this Number Countup Animation. Which will help you to know how it works. I used a nice background image on a web page as you saw above. On which four small boxes have been made. One icon, one number, and one test have been added to the box. 

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

I have made the background of this simple count-up animation transparent. As a result, these small boxes can be seen almost transparently in the background. 

I have already shared tutorials on creating many elements such as login forms, profile cards, etc. using transparent design.

How to Create a Responsive Count up Animation

To create this Responsive Counter Up Animation you need to have a basic idea about HTML, CSS, and javascript. I have shared step by step tutorial here. I have given possible results with pictures after each step.

Step 1: HTML Code of Count up Animation

I have added all the information using the following code. I made four boxes. In that box you can see the icon first, then the number count down, and then a text.

<div class=”wrapper”>
 
  <div class=”container”>
     <i class=”fa-brands fa-html5″></i>
     <span class=”num” data-val=”365″>000</span>
     <span class=”text”>HTML Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-python”></i>
     <span class=”num” data-val=”290″>000</span>
     <span class=”text”>Python Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-node-js”></i>
     <span class=”num” data-val=”219″>000</span>
     <span class=”text”>Javascript Project</span>
  </div>
 
  <div class=”container”>
     <i class=”fa-brands fa-bootstrap”></i>
     <span class=”num” data-val=”140″>000</span>
     <span class=”text”>Bootstrap Design</span>
  </div>
 
</div>
 
HTML Output:

Step 2: Design the webpage with CSS

I have designed the webpage using the following CSS codes. Here an image is used in the background of the web page. You can use any background color instead of this image.

 
* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 font-family: “Poppins”, sans-serif;
}
 
body {
 background: url(“http://driving-tests.org/wp-content/uploads/2012/03/night-road.jpg” );
 background-repeat: no-repeat;
 background-position: center;
 background-size: cover;
 height: 100vh;
}
 
.wrapper {
 position: absolute;
 width: 80vw;
 transform: translate(-50%, -50%);
 top: 50%;
 left: 50%;
 display: flex;
 justify-content: space-around;
 gap: 10px;}
 
Design the webpage with CSS

Step 3: Basic structure of Counter Up box

Now I have made the boxes of this counter. The backdrop-filter: blur (10px) has been used to make these boxes width: 28vmin, height: 28vmin, and some background obscure.

.container {
 width: 28vmin;
 height: 28vmin;
 display: flex;
 flex-direction: column;
 justify-content: space-around;
 padding: 1em 0;
 position: relative;
 font-size: 16px;
 border-radius: 0.5em;
 backdrop-filter: blur(10px);
 box-shadow: -1px -1px 4px #aaa9a9a2,
              1px 1px 7px rgba(147, 149, 151, 0.671);
}
Basic structure of Counter Up box

Step 4: Design the information of Counter Up Animation

Now I have designed icons, numbers, and text using the following codes. Icon’s color I blue, text and number color white has been used. You can change the color to your liking here.

i {
 color: #42f9e8;
 font-size: 3.8em;
 text-align: center;
}
 
span.num {
 color: #ffffff;
 display: grid;
 place-items: center;
 font-weight: 600;
 font-size: 3em;
}
 
span.text {
 color: #e0e0e0;
 font-size: 1em;
 text-align: center;
 pad: 0.7em 0;
 font-weight: 400;
 line-height: 0;
}
Design the information of Counter Up Animation

Step 5: Make it responsive with CSS

Now is the time to make this javascript Counter Up Animation Responsive. The following amounts of CSS have been used to make it responsive.

@media screen and (max-width: 1024px) {
.wrapper {
 width: 85vw;
}
.container {
 height: 26vmin;
 width: 26vmin;
 font-size: 12px;
}
}
 
@media screen and (max-width: 768px) {
.wrapper {
  width: 90vw;
  flex-wrap: wrap;
  gap: 30px;
}
.container {
  width: calc(50% – 40px);
  height: 30vmin;
  margin-bottom: 25px;
  font-size: 14px;
}
}
 
@media screen and (max-width: 480px) {
.wrapper {
  gap: 15px;
}
.container {
  width: 100%;
  height: 25vmin;
  font-size: 8px;
  margin-bottom: 25px;
}
}
Make it responsive with CSS

Step 6: Activate Counter Up Animation by JavaScript

I have done all the design work above and made the Animated Counter Responsive. Now the most important thing is to make it work. Some amount of JavaScript has been used for this.

let valueDisplays = document.querySelectorAll(“.num”);
let interval = 4000;
 
valueDisplays.forEach((valueDisplay) => {
  let startValue = 0;
  let endValue = parseInt(valueDisplay.getAttribute(“data-val”));
  let duration = Math.floor(interval / endValue);
  let counter = setInterval(function () {
     startValue += 1;
     valueDisplay.textContent = startValue;
     if (startValue == endValue) {
       clearInterval(counter);
     }
   }, duration);
 });
Activate Counter Up Animation by JavaScript

Counter Up Animation JavaScript (code)

If you just want to copy the code and use it in your work then the box below will help you. Below I have put together all the source code. 

To do this, you first need to create an HTML file. Then add these codes to that file. Here you do not need to create separate JavaScript and CSS files.

See the Pen
Untitled by Foolish Developer (@foolishdevweb)
on CodePen.

We hope that the above code and tutorial have helped you to create this Responsive Counter Up Animation. If there is any difficulty in assembling the codes, you can use the download button below. 

If you have any questions, you can comment directly on my Instagram. Please let me know how this javascript Counter Up Animation project works.