Counter-sections are often used on websites to highlight important statistics or achievements. They are effective in capturing the attention of visitors and conveying information in a visually pleasing manner. Bootstrap 5 provides classes and components that make it easy to create these sections.
Configuring the Bootstrap 5
Before we dive into creating counter sections, make sure you have Bootstrap 5 integrated into your project. You can do this by including Bootstrap’s CSS and JavaScript files in your HTML document. You can either download Bootstrap locally or use a Content Delivery Network (CDN) for quicker integration.
Approach
-
Creating the basic structure of the Counter Section:
- Various HTML tags are employed to establish the foundational structure of the project.
- <div>: Used for grouping and structuring content.
- <h1>, <h2>, <h3>, etc: Headings for different sections or titles.
- <p>: For paragraphs and text content.
-
Styling the Counter Section:
- Bootstrap provides a range of classes for styling counter sections.
- Utilize classes like bg-primary, text-light, rounded, and p-3 to customize the background color, text color, and padding of the counter cards.
- Experiment with these classes to achieve the desired visual appearance for your website.
-
Adding functionality to the Counter Section using JavaScript:
- Select Counters: Use document.querySelectorAll(‘.counter’) to select all elements with the class “counter.”
- Get Target Values: Extract the target value from the “data-target” attribute for each counter using parseInt(counter.getAttribute(‘data-target’)).
- Set Duration and Speed: Define animation duration and calculate a “step” value to control animation speed.
- Initialize Variables: Initialize the current variable to 0.
- Update Counter: Create updateCounter to increment the current value, update the counter’s text, and request the next animation frame.
- Delay Counters: Use setTimeout with a delay of index * 1000 to ensure sequential counting.
- Start Animation: Call animateCounters() on page load.
Example: This example illustrates the creation of a basic counter section using Bootstrap 5.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" />
< meta name = "viewport"
content=" width = device -width,
initial-scale = 1 .0" />
< title >
Sequential Counters Example
</ title >
< link href =
rel = "stylesheet" />
< style >
/* Custom CSS */
body {
height: 97vh;
background-color: #e6df90;
}
</ style >
</ head >
< body >
< div class = "h1 text-success text-center mt-3" >
GeeksForGeeks
< p class="h4 mt-5 text-muted
text-start text-center">
GeeksforGeeks is a leading platform
that provides computer science
resources and coding challenges
for programmers.
</ p >
</ div >
< div class = "container mt-5" >
< div class="row
justify-content-center">
< div class = "col-md-4" >
< div class="card text-center
bg-info text-dark
rounded p-3">
< div class = "card-body" >
< h3 class = "card-text counter" data-target = "95" >
0
</ h3 >
< p class="card-title
fs-5 text-white">
No. of Courses we provided
</ p >
</ div >
</ div >
</ div >
< div class = "col-md-4" >
< div class="card text-center bg-info
text-dark rounded p-3">
< div class = "card-body" >
< h3 class = "card-text counter" data-target = "150000" >
0
</ h3 >
< p class="card-title
fs-5 text-white">
Enrolled Students
</ p >
</ div >
</ div >
</ div >
< div class = "col-md-4" >
< div class="card text-center bg-info
text-dark rounded p-3">
< div class = "card-body" >
< h3 class = "card-text counter" data-target = "1000000" >
0
</ h3 >
< p class="card-title fs-5
text-white">
Registered Students
</ p >
</ div >
</ div >
</ div >
</ div >
</ div >
< script src = "./script.js" ></ script >
</ body >
</ html >
|
/* JavaScript to animate the counters sequentially*/
function animateCounters() {
const counters =
document
.querySelectorAll( ".counter" );
counters
.forEach((counter, index) => {
const target =
parseInt(counter
.getAttribute(
"data-target" )
);
const duration = 1000;
const step =
Math.ceil(
(target / duration) * 15
);
let current = 0;
const updateCounter = () => {
current += step;
if (current <= target) {
counter
.innerText = current;
requestAnimationFrame(updateCounter);
} else {
counter.innerText = target;
}
};
setTimeout(() => {
updateCounter();
}, index * 1000);
// Delay each counter by 1 second
});
} animateCounters(); |
Output: