Counter Effect

This is the counter HTML example code in homepage 2:

<span class="counter_text" data-end="1420">0</span>

So the effect/script function will be trigger when the element with counter_text class is in view. Make sure to input 0 in the span element. And you can insert the end number in the data-end

The script for this function is in vanilla-counter.js but you might want to avoid editing this file.

For the trigger effect, its in script.js

/* counter init with waypoint */
/* trigger waypoints on the element with class .stat_section */
const counterSection = document.querySelector('.stat_section');
if (counterSection) {
    const counter = new Waypoint({
        element: counterSection,
        handler: function (direction) {
            /* variable:class,duration time= default 5 (seconds) */
            rdn_counter(".counter_text", 15);
        },
        offset: '75%',
    })

}

The counter will start when the class stat_section in view. And the duration for animation is 15 seconds.

Back to top