usecueweb development

Count Up by Usecue

Close
  • readme.txt
  • index.html
  • countup.css
  • countup.js

What is this?

This is a simple script that finds the number in a dom element, wraps it in a span and counts from 0 to that number when it enters the screen, starting with a small delay.

How to use it?

Just add the following code to your footer.

<ul>
    <li class="countup">Count to 100%</li>
    <li class="countup">Count to 200kg</li>
    <li class="countup">Count to 13</li>
</ul>
<script src="countup.js"></script>

Features

The counter fires only once per page load, has a default delay of 500ms and a default duration of 1000ms. It starts once the element scrolls into view, which is detected by a intersection observer. The settings (delay and duration) can be set in the top of the countup.js file.

License

This code is licensed WTFPL.

 1<div class="page">
 2    <h1>Count Up Demo</h1>
 3    <ul>
 4        <li class="countup">Count to 100%</li>
 5        <li class="countup">Count to 200kg</li>
 6        <li class="countup">Count to 13</li>
 7    </ul>
 8    <p>Scroll down for another demo. <a href="javascript:window.location.reload();">Replay animation</a></p>
 9</div>
10<div class="page">
11    <h2>Started on entering the viewport</h2>
12    <ul>
13        <li class="countup">Count to 0.9%</li>
14        <li class="countup">Count to 0.200kg</li>
15        <li class="countup">Count to 0.13</li>
16    </ul>
17    <p><a href="javascript:window.location.reload();">Replay animation</a></p>
18</div>
19<link rel="stylesheet" href="/demos/countup/countup.css" />
20<script src="/demos/countup/countup.js"></script>
1/* CSS for demo layout only */
2.page {
3    display: flex;
4    min-height: 95vh;
5    flex-direction: column;
6    justify-content: center;
7    max-width: 16rem;
8    margin-inline: auto;
9}
 1const countDelay = 500; //delay before starting countup in ms
 2const countDuration = 1000; //duration of countup in ms
 3
 4function countUp(element) {
 5    var countUpTarget = element;
 6    var target = countUpTarget.parentElement.getAttribute('data-target');
 7    var decimalPlaces = 0;
 8    //if target contains a dot, parse as float
 9    if (target.indexOf('.') !== -1) {
10        decimalPlaces = target.split('.')[1].length;
11        target = Math.ceil(parseFloat(target)*Math.pow(10, decimalPlaces))/Math.pow(10, decimalPlaces);
12        stepSize = 1/Math.pow(10,decimalPlaces);
13    } else {
14        target = parseInt(target);
15        var stepSize = Math.ceil(target / 150);
16    }
17    let count = 0;
18    const stepTime = Math.round((countDuration * stepSize) / target);
19    const timer = setInterval(() => {
20        count += stepSize;
21        countUpTarget.innerText = Math.ceil(count*Math.pow(10, decimalPlaces))/Math.pow(10, decimalPlaces);
22        if (count >= target) {
23            clearInterval(timer);
24            countUpTarget.innerText = countUpTarget.parentElement.getAttribute('data-target');
25        }
26    }, stepTime);
27}
28//run countup when dom is loaded and intersecting using IntersectionObserver
29document.addEventListener('DOMContentLoaded', function() {
30    const observer = new IntersectionObserver(function(entries) {
31        entries.forEach(function(entry) {
32            if (entry.isIntersecting) {
33                //find first number in string and allow for commas and dots
34                var target = entry.target.innerText.match(/[-+]?[0-9]*\.?[0-9]+/)[0];
35                //set data-target attribute
36                entry.target.setAttribute('data-target', target);
37                //wrap the target number in a span
38                entry.target.innerHTML = entry.target.innerHTML.replace(target, `<span class="countup-target">${target}</span>`);
39                var countUpTarget = entry.target.querySelector('.countup-target');
40                //set initial value to 0 and start countup after delay
41                countUpTarget.innerText = '0';
42                setTimeout(() => countUp(countUpTarget), countDelay);
43                observer.unobserve(entry.target);
44            }
45        });
46    });
47    document.querySelectorAll('.countup').forEach(function(element) {
48        observer.observe(element);
49    });
50});