Starting counters of digits when scrolling to them, how to do it?

Question

JavaScript

There is a function that runs a digit counter:

$('.counter').each(function() {
  $(this).prop('Counter', $(this).data('from')).animate({
    Counter: $(this).text()
  }, {
    duration: $(this).data('duration'),
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now))
    }
  })
});

The counter works for elements with the ".counter" class, only these elements are scattered across the page.

I wanted to make them start calculating when the user scrolls to them, but when I wrote such a function, it did not work correctly, because they have one class and the function cannot understand that you need to monitor each element separately.

Please tell me how to implement this function, thanks.

Answer 1

https://webkab.ru/dejstvie-pri-poyavlenii-elementa... - I think it will help

Answer 2

Are you seriously? Today I already answered this question and gave the code How to run a js script at a specific place?
I 'll duplicate it again:
Put the code in a function and call it on the scroll event when it reaches the element you need:

function start_count() {
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 5555,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

$(function() {
    var oTop = $('.count').offset().top - window.innerHeight;
    $(window).scroll(function(){
        var pTop = $('body').scrollTop();
        if( pTop > oTop ){
            start_count();
        }
    });
});

Answer 3

https://t.me/feenproject/16