Count-Up Number Animation Using jQuery

Engage your audience with dynamic number animations that bring statistics and figures to life. With the Count-Up Number Animation feature, you can highlight key metrics, achievements, and milestones in an eye-catching and memorable way.

How it works ?

Count-Up Number Animation utilizes jQuery and the Counter-Up plugin to smoothly animate numbers as they scroll into view. This creates a visually appealing effect that captures attention and adds a touch of interactivity to your website.

Key Features

• Easy Integration: Simply include the Counter-Up plugin and jQuery in your webpage, and add a few lines of code to your HTML to activate the animation.
• Customizable: Tailor the animation duration, styling, and target numbers to suit your preferences and branding.
• Responsive Design: Works seamlessly across devices and screen sizes, ensuring a consistent and engaging experience for all users.

Why Use Count-Up Number Animation:

• Highlight Important Data: Showcase key metrics, such as sales figures, website traffic, or social media followers, in a visually compelling manner.
• Increase Engagement: Capture the attention of visitors and encourage them to interact with your content by presenting numbers in an animated format.
• Enhance User Experience: Add an element of dynamism and excitement to your website, making it more memorable and enjoyable to explore.

Follow this video for complete guidance :

Full Source Code

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css">

<style type="text/css">
  body{
    background-color: #83e6e3;
  }
  .wrap{
    padding:20px;
    background-color:#993f0f;
    color:#fff;
  }
  .number{
    font-weight: bold;
    font-size: 50px;
    margin-bottom: 10px;
  }
  .title{
    font-size:38px;
  }
  .box{
    border:1px solid #ccc;
    margin-bottom: 20px;
    padding:20px 10px;
  }
</style>

<div class="container text-center">
  <div class="row text-center">
    <h1 class="fw-bold mb-5 mt-5">Count Up Number Animation</h1>
  </div>
  <div class="row wrap">
    <div class="col-6">
    	<div class="box">
      		<div class="number">780</div>
      		<div class="title">Projects</div>
      </div>
  </div>
    <div class="col-6">
    	<div class="box">
      <div class="number">236</div>
      <div class="title">Clients</div>
    </div>
    </div>
    <div class="col-6">
    	<div class="box">
      <div class="number">430</div>
      <div class="title">Logo</div>
    	</div>
    </div>
    <div class="col-6">
    <div class="box">
      <div class="number">1007</div>
      <div class="title">Services</div>
    </div>
    </div>
  </div>
</div>



<script>
  $(".number").counterUp({time:3000});
</script>

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies things like HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Counter-Up

Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible.

Waypoints

Waypoints is a library that makes it easy to execute a function whenever you scroll to an element. It’s often used in conjunction with Counter-Up to trigger the count-up animation when the numbers become visible in the viewport.