How to use Counter up js in your website

 

Hello friends, in this project, I am going to share a snippet based on how we can quickly implement counter up js plugin to a website. Previously I have shared a snippet on the ribbon banner navbar. Check that out whether you haven't already.

In this project, I created a full-screen homepage and then started a separate section with some random text. After that section, I have implemented the counter up js plugin. This plugin is widely used in most of the website design nowadays. It indicates the progress of any company through some animated counting numbers.

For this snippet, you need to add a couple of files to your project. I have added bootstrap js, bootstrap CSS, jquery, and font-awesome CDN below for your convenience. Apart from this, you need two more files. One of them is waypoints js, and the other is counter up js. I have given the google drive link for those files. Download those and add those to your project at the bottom along with the other js files as well. Without explaining further, I am providing you the source code to play around with the code by yourself.

DOWNLOAD FILES

REQUIRED FILES

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/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/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

HTML

<header> <div class="banner-text"> <h2>banner area</h2> </div> </header> <div class="content-area section-padding"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1 text-center"> <h2>section header</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ratione et soluta aliquid ipsa, pariatur fugit neque in. Magni aspernatur facere doloribus, voluptas quod et atque aperiam autem unde incidunt ipsa tenetur necessitatibus, repudiandae, harum saepe consequatur, dolorem dignissimos blanditiis quia. Cupiditate dignissimos quaerat mollitia in debitis vel, ducimus provident ut reiciendis omnis tenetur totam, ullam rerum repellat ad necessitatibus. Nemo ipsa eum quibusdam commodi qui eveniet ducimus ab, distinctio quam cum. Nisi harum sunt ipsa reiciendis. Voluptatum repudiandae incidunt deleniti eligendi perspiciatis nulla a aperiam non doloribus commodi consectetur delectus, error modi fuga veniam molestiae reprehenderit ad totam deserunt libero, consequuntur, distinctio quo. Delectus, ullam tenetur porro voluptate ab, provident illo, voluptas sapiente ad officia non repellendus magnam assumenda! Ducimus rem quod doloribus vel numquam aperiam id consequuntur a porro molestiae dolorem, maxime, quisquam, omnis corporis autem. Eius accusantium ut accusamus illum praesentium, architecto voluptatibus, molestias magnam error laudantium!</p> </div> </div> </div> </div> <div class="statistic-area"> <div class="sts-overlay section-padding"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="single-count count-one xs-mb-30 sm-mb-30"> <i class="fa fa-clock-o"></i> <h2 class="count">5518</h2> <p>Hours of work</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="single-count count-two xs-mb-30 sm-mb-30"> <i class="fa fa-building-o"></i> <h2 class="count">110</h2> <p>Well-Furnished Offices</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="single-count count-three xs-mb-30"> <i class="fa fa-users"></i> <h2 class="count">10000</h2> <p>Happy Customers</p> </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="single-count count-four"> <i class="fa fa-trophy"></i> <h2 class="count">750</h2> <p>Business Awards</p> </div> </div> </div> </div> </div> </div>


CSS 

body{ font-family: poppins; } header{ height: 100vh; background-image: url(https://i.postimg.cc/tTBd9dnz/2.jpg); -webkit-background-size: cover; background-size: cover; background-position: center center; } .banner-text{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } .banner-text h2 { font-size: 60px; font-weight: 900; text-align: center; color: #fff; text-transform: uppercase; letter-spacing: 2px; } .content-area h2 { text-transform: uppercase; font-weight: 900; margin-bottom: 30px; font-size: 45px; } .statistic-area{ background-image: url(1.jpg); -webkit-background-size:cover; background-size:cover; background-position: center center; background-attachment: fixed; text-align: center; } .section-padding{ padding: 80px 0; } .statistic-area .sts-overlay { background: rgba(0,0,0,0.8); } .single-count i { color: #ffffff; font-size: 35px; } .single-count h2 { font-size: 50px; color: darkorange; font-weight: 700; } .single-count p { font-size: 18px; color: #ffffff; }


JS 

$('.count').countUp({ delay: 10, time: 1500 });

I hope you liked it. Please follow our social media links to keep yourself updated for future posts. Thanks for visiting the blog.