Привет всем! Нестандартный вопрос сегодня, но вдруг кому пригодится: как сделать JavaScript срабатывающий в видимой части браузера? Т.е. пока мы не доскролим до слоя, в котором висит этот код — он не запустится. Решение подсказал мой старинный друг, гуру JavaScript — за что ему спасибо 🙂 Сам же я этот самый JavaScript только решаюсь посмотреть подробнее 🙂

Итак — вот код страницы, на которой расположен наш скрипт:

158055676367015e4e4fbb8_000000

красным слой сделан специально — для демонстрации 🙂

А вот — сам код скрипта, который должен стартовать как только окажется в видимой части браузера:

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'));

Более полно это выглядит так:

Спасибо за внимание 🙂