Анимация цифр при появлении в зоне видимости экрана

Анимация цифр только в зоне видимости экрана, не раньше :)

1. HTML

<div class="row row-number_animate text-center my-4 counter_digit">
<div class="col-4">
<div class="digit">18</div>
<p>жилых домов в обслуживании</p>
</div>
<div class="col-4">
<div class="digit">500</div>
<p>кв.м. обслуживаемой площади</p>
</div>
<div class="col-4">
<div class="digit">1000</div>
<p>обслуживаемых квартир</p>
</div>
</div>

2. Скрипт js с использованием плагина jquery.spincrement.min.js

<script type="text/javascript" src="/js/jquery.spincrement.min.js"></script>

<script type="text/javascript">
var isAnimatePriceInitialized = false;

function animatePrice(){
$(".digit").each(function() {
$(this).spincrement({
thousandSeparator:'&nbsp;',
});
});
}

$(window).on('scroll.myfunction', function() {
if (!isAnimatePriceInitialized) {
var hT = $('.counter_digit').offset().top,
hH = $('.counter_digit').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if ((wS >= (hT + hH - wH))) {
animatePrice();
isAnimatePriceInitialized = true;
}
}
});
</script>

Скачать скрипт jquery.spincrement.min.js

Заметки фрилансера

Анимация цифр при появлении в зоне видимости экрана