animated stats counter js
An animated stats counter is a dynamic element on a website that visually displays changing numerical values through animated transitions. Typically used to showcase statistics, metrics, or countdowns, these counters increment or decrement in real-time, adding a visually appealing and engaging element to the user interface.
Benefits of having an animated stats counter on your website include:
Visual Appeal: Animated counters add a dynamic and visually interesting element to your website, capturing users’ attention and making the content more engaging.
User Engagement: Dynamic animations can enhance user interaction and engagement, encouraging visitors to spend more time on your site.
Highlighting Achievements: If used to display achievements, milestones, or success metrics, animated counters can effectively highlight and celebrate accomplishments, fostering a positive impression.
Conveying Urgency: In cases of countdowns or limited-time offers, animated counters create a sense of urgency, prompting users to take action before a specified event or promotion ends.
Showcasing Growth: For statistics related to user base, sales, or any growing metric, animated counters provide a visual representation of progress, reinforcing a sense of momentum and success.
Information Retention: The dynamic nature of animated counters can aid in information retention as users are more likely to remember visually presented data compared to static content.
Modern Aesthetic: Animated counters contribute to a modern and dynamic website design, aligning with contemporary design trends and enhancing the overall aesthetic appeal.
When used thoughtfully, animated stats counters not only convey information effectively but also contribute to a more interactive and visually compelling user experience, which can positively impact user perception and engagement on your website.
animated stats counter js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let valueDisplays = document.querySelectorAll(".num");
let interval = 3000;
valueDisplays.forEach((valueDisplays) => {
let startValue = 0;
let endValue = parseInt(valueDisplays.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function () {
startValue += 1;
valueDisplays.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="counter__wrapper">
<div class="num-counter">
<span class="num" data-val="210">000</span>
</div>
<div class="num-counter">
<span class="num" data-val="200">000</span>
</div>
<div class="num-counter">
<span class="num" data-val="230">000</span>
</div>
<div class="num-counter">
<span class="num" data-val="188">000</span>
</div>
</div>
full snippet
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>count</title>
<style>
body {
background-color: black;
}
span {
color: lightblue;
font-size: 40px;
}
.counter__wrapper {
height: 100vh;
display: flex;
column-gap: 20px;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="counter__wrapper">
<div class="num-counter">
<span class="num" data-val="210">000</span>
</div>
<div class="num-counter">
<span class="num" data-val="200">000</span>
</div>
<div class="num-counter">
<span class="num" data-val="230">000</span>
</div>
<div class="num-counter">
<span class="num" data-val="188">000</span>
</div>
</div>
<script>
let valueDisplays = document.querySelectorAll(".num");
let interval = 3000;
valueDisplays.forEach((valueDisplays) => {
let startValue = 0;
let endValue = parseInt(valueDisplays.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function () {
startValue += 1;
valueDisplays.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
</script>
</body>
</html>
start animation when scroll into viewport
If your animated section is below the fold. Its essential to start the animation when the section is visible. Otherwise the animation will start and finish before the user has scrolled the section into view.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function ($) {
if ($(".stats").length > 0) {
var winHeight = $(window).height(),
firEvent = false,
objectPosTop = $(".stats").offset().top,
elementViewInBottom = objectPosTop - winHeight;
$(window).on("scroll", function () {
var currentPosition = $(document).scrollTop();
//when element position starting in viewport
if (currentPosition > elementViewInBottom && firEvent === false) {
firEvent = true;
let valueDisplays = document.querySelectorAll(".num");
let interval = 3000;
valueDisplays.forEach((valueDisplays) => {
let startValue = 0;
let endValue = parseInt(valueDisplays.getAttribute("data-val"));
let duration = Math.floor(interval / endValue);
let counter = setInterval(function () {
startValue += 1;
valueDisplays.textContent = startValue;
if (startValue == endValue) {
clearInterval(counter);
}
}, duration);
});
}
});
}
})(jQuery);