Count-Up Number Animation Using jQuery for free

0
140
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. You may also like : Football Lineup Selection with jQuery UI Drag Drop

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.
Count up number animation
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.
ALSO READ  Create Custom Music Player using HTML, CSS and JavaScript

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.

Comments are closed.