Overview
We have a requirement in one of our projects to have counters that should be animated when it is within the viewport as well as on scroll in both directions. As we all know that the simplest way is to go to Google and search for some script that makes our job easy, we also did the same but we were unable to search for the same. Now, we don’t have any other option rather than generating it on our own.
Prerequisite
To initialize, we looked up for the script that help us to know that the particular element is within the viewport(user’s visible area of the site) and we succeeded in finding the one i.e Waypoints Inview. We have used that to implement this counters. Most primary requirement for this jquery library. You can download waypoints scripts from this website.
Implementation
1) Implement the script for counter
Mostly we begin the easiest task that we are able to sail through. So we begin with script for the counter increment.
HTML:
<div id="inview-example" class="counters"> <div class="common-box"> <div class="counter-num"> <span class="timer" data-count="9">9</span> <span>+</span> </div> <div class="counter-text">Years Experience</div> </div> <div class="common-box"> <div class="counter-num"> <span class="timer" data-count="2200">2200</span> <span>+</span> </div> <div class="counter-text">Successful Projects</div> </div> <div class="common-box"> <div class="counter-num"> <span class="timer" data-count="80">80</span> <span>%</span> </div> <div class="counter-text">Repeated Clients</div> </div> <div class="common-box"> <div class="counter-num"> <span class="timer" data-count="200">200</span> <span>+</span> </div> <div class="counter-text"> Employees</div> </div> </div>
Script:
$('.timer').each(function () {
var $this = $(this);
var val = $(this).data('count');
jQuery({ Counter: 0 }).animate({ Counter: val }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});2) Implement waypoints
To begin with waypoints, we need to include scripts as stated in prerequisite. Then we created a function for it and initialized that function on load of the page.
function inviewExample() {
var $example = $('#inview-example');
var inview;
if ($example.length) {
inview = new Waypoint.Inview({
element: $('#inview-example')[0],
entered: function(direction) {
// counter script that we have implemented in previous step
}
}
$(window).on('load', function() {
inviewExample();
});3) Result
You can download the source code from here. The final result is as below.
Conclusion
I hope that this blog might be useful to you. I have implemented this with the help of my colleagues Richa and Amitsinh.
You may also like
How does UI and UX Design Impact our everyday lives?
Today’s modern day users' wants and needs have shifted drastically. In today’s day and age, ther...
AI-Driven UI UX Testing: A Profitable Move for Modern Web Design
AI powered future is shining the brightest for companies and...
UX Design for Startups: A Key Necessity
UX design is all about top-notch user experience. UX design for startups is non-negotiable. Are you ...
