Counter Effect
This is the counter HTML example code in homepage 2:
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.