Animated Counter using Java

Paste below code in Code Block > PHP & HTML

If you want to use multiple times, change the 'counter1' (in two places)

target = 2300000000 = Your target numbers (the one that will be animated)
duration = 2000 = Duration of the animation

<span class="counter1">0</span>

<script>
// Counter 1
(function(){
    let counter = document.querySelector(".counter1");
    let target = 2300000000;
    let duration = 2000;
    let started = false;

    function startCounter() {
        if (started) return;
        started = true;

        let count = 0;
        let steps = duration / 10;
        let increment = target / steps;

        let interval = setInterval(() => {
            count += increment;

            if (count >= target) {
                counter.innerText = target.toLocaleString();
                clearInterval(interval);
            } else {
                counter.innerText = Math.floor(count).toLocaleString();
            }
        }, 10);
    }

    let observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                startCounter();
                observer.unobserve(counter);
            }
        });
    }, { threshold: 0.5 });

    observer.observe(counter);
})();
</script>
Copyright © 2026 Siam Naulak.
magnifiercrossmenu