Responsive Counter up Animation on Scroll using HTML CSS & jQuery

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 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, and 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 activate 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.

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 these following codes into your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!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>

CSS FILE:

@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;
  }
}

Video Tutorial of Responsive Counter up Animation

You might like this:

Responsive Counter up Animation [Source Codes]

Thanks for visiting, Keep visiting.

Post a Comment

Post a Comment

About Us

Contact Form