Hello everybody! A non-standard question today, but suddenly someone will come in handy: how to make JavaScript work in the visible part of the browser? Those. until we scroll down to the layer where this code hangs, it won’t run. The solution was suggested by my old friend, a JavaScript guru – for which thanks to him 🙂 I myself only dare to look at this JavaScript in more detail 🙂
So – here is the code of the page where our script is located:
20
Länder
the red layer was made specially – for demonstration 🙂
And here is the script code itself, which should start as soon as it appears in the visible part of the browser:
var options = {
root: null,
rootMargin: '0px',
threshold: 1.0
}
var callback = function(entries, observer) {
entries.map(item => {
if(item.isIntersecting) {
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
}
})
};
var observer = new IntersectionObserver(callback, options);
observer.observe(document.querySelector('.count'));
More fully it looks like this:
Thanks for attention 🙂
Support the Blog!
Running a blog takes a lot of effort, time, and passion. Your donations help improve the content, inspire new ideas, and keep the project going.
If you’ve enjoyed the blog’s materials, any support would mean the world to me. Thank you for being here! ❤️