Today we will learn how to create a simple counter animation using HTML, CSS, and JavaScript. We started by creating a basic HTML structure for the counter and added CSS styles to create a visually appealing design. Next, we added JavaScript code to create a counter animation that counts up to a specified number over a specified duration using the jQuery library.
Finally, we added an intersection observer to detect when the .counterup elements are in view and trigger the counter animation. This allows the counter animation to start when the element is scrolled into view, providing a better user experience and optimizing performance.
It will look like this
With these techniques, you can create engaging and interactive web pages that capture your audience’s attention and provide a memorable user experience.
Counters are a popular way to display numerical information on a webpage. An animated counter is a more engaging way to present this information, as it gradually increases the value of the number from zero to its final value. In this tutorial, we will learn how to use the Intersection Observer API and jQuery to create an animated counter that starts when the user scrolls to the counter section on the webpage.
Before we begin, make sure that you have a basic understanding of HTML, CSS, and JavaScript. We will be using jQuery in this tutorial, so it is also helpful to have some knowledge of jQuery.
Step 1: Setting up the HTML structure
Let’s start by creating the HTML structure for the counter. We will create a wrapper div with four child divs that each contain a counter value and its associated label. Each counter value will be represented by a span element with a class of “counterup”. Here’s the HTML code:
<div class="counter-wrapper">
<div class="counter-item">
<div class="count-wrapper">
<h4><span class="counterup">100</span>+</h4>
<p>Project Done</p>
</div>
</div>
<div class="counter-item">
<div class="count-wrapper">
<h4><span class="counterup">21</span>+</h4>
<p>Countries</p>
</div>
</div>
<div class="counter-item">
<div class="count-wrapper">
<h4><span class="counterup">70</span>+</h4>
<p>Clients</p>
</div>
</div>
<div class="counter-item">
<div class="count-wrapper">
<h4><span class="counterup">100</span>%</h4>
<p>Positive Review</p>
</div>
</div>
</div>
In this code, we have created a wrapper div with a class of “counter-wrapper”. Inside this div, we have four child divs with a class of “counter-item”. Each counter item contains a div with a class of “count-wrapper”. Inside the count wrapper, we have an h4 element with a span element with a class of “counterup”. This span element will contain the numerical value of the counter. Finally, we have a p element that contains the label for the counter.
Step 2: Adding CSS styles
Now that we have the HTML structure in place, we need to add some CSS styles to make the counters look good. Here’s the CSS code:
body {
background-color: #182133;
color: #ccd6f6;
}
.counter-wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.counter-item {
width: 25%;
text-align: center;
margin-bottom: 30px;
padding: 20px;
box-sizing: border-box;
}
.count-wrapper {
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px #536efe;
}
h4 {
font-size: 60px;
font-weight: bold;
margin: 0;
color: #fff;
}
p {
font-size: 18px;
font-weight: 500;
margin: 10px 0 0 0;
}
Step 3: Add Intersection Observer to Detect When Elements are in View
The next step is to create an intersection observer that will detect when the .counterup elements are in view and trigger the counter animation.
An intersection observer is a powerful API that allows you to observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. In this case, we’ll use an intersection observer to detect when the .counterup elements are in view and trigger the counter animation.
To create an intersection observer, add the following JavaScript code:
$(document).ready(function () {
// code from https://code.mukto.info/counter-up-with-a-simple-jquery/
// Create new intersection observer
var observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
// If the element is in view, start counter animation
if (entry.isIntersecting) {
$(entry.target).prop("Counter", 0).animate(
{
Counter: $(entry.target).text(),
},
{
duration: 4000,
easing: "swing",
step: function (now) {
$(entry.target).text(Math.ceil(now));
},
}
);
// Stop observing the element to prevent duplicate animations
observer.unobserve(entry.target);
}
});
});
// Observe each .counterup element
$(".counterup").each(function () {
observer.observe(this);
});
});
This code creates a new IntersectionObserver object and defines a callback function that will be called when the observed elements intersect with the root element. The callback function receives two arguments: entries, which is an array of IntersectionObserverEntry objects, and observer, which is a reference to the observer instance.
Inside the callback function, the code loops through each entry in the entries array and checks if the element is intersecting with the root element by checking the isIntersecting property. If the element is in view, the code starts a counter animation using the .prop() and .animate() methods from the jQuery library. The step function is called for each animation step and updates the text of the element with the current counter value using Math.ceil() to round up to the nearest integer.
Finally, the code stops observing the element by calling observer.unobserve(entry.target) to prevent duplicate animations when the element intersects with the root element multiple times.
In the next step, we’ll observe each .counterup element using the intersection observer.
Now we’ve learned how to create a simple counter animation using HTML, CSS, and JavaScript. We started by creating a basic HTML structure for the counter and added CSS styles to create a visually appealing design. Next, we added JavaScript code to create a counter animation that counts up to a specified number over a specified duration using the jQuery library.
Finally, we added an intersection observer to detect when the .counterup elements are in view and trigger the counter animation. This allows the counter animation to start when the element is scrolled into view, providing a better user experience and optimizing performance.
With these techniques, you can create engaging and interactive web pages that capture your audience’s attention and provide a memorable user experience.
