Запуск счетчиков цифр при скролле до них, как сделать?

Question

[Расул Гитинов]

Есть функция, которая запускает счетчик цифр:

$('.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))
		}
	})
});

Счетчик работает у элементов с классом ".counter", только эти элементы раскиданы по странице.

Хотел сделать, чтобы они начинали просчитываться в том случае, когда пользователь до них доскралливает, но когда я прописал такую функцию, то сработало некорректно, поскольку у них один класс и функция не может понять, что нужно следить отдельно за каждым элементом.

Подскажите, как правильно реализовать такую функцию, спасибо.

Answer 1

[aloky]

https://webkab.ru/dejstvie-pri-poyavlenii-elementa... - думаю поможет

Comments

[Расул Гитинов]

Очень странно работает, вот такой код получился:

var windowHeight = $(window).height();
$(document).on('scroll', function() {
	$('.counter').each(function() {
		var self   = $(this),
			height = self.offset().top + self.height();
		if ($(document).scrollTop() + windowHeight >= height) {
			$('.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))
					}
				})
			});
		}
	});
});

Вот, что получилось: ссылка

Answer 2

[Евгений Калибров]

Вы серьёзно? Я сегодня уже отвечал на этот вопрос и код давал Как запустить js скрипт на определенном месте?
Продублирую ещё раз:

Поместите код в функцию и вызывайте её по событию скролла, когда он дойдёт до нужного вам элемента:

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();
        }
    });
});

Comments

[Расул Гитинов]

Да, но он начинает работать некорректно, вот так

[Евгений Калибров]

Ну так вы в том же вопросе могли сказать об этом.

[Расул Гитинов]

Евгений Калибров, Я даже не заметил тот вопрос)

[Евгений Калибров]

Расул Гитинов, а кто же его задавал, не вы под другим аккаунтом?

[Расул Гитинов]

Евгений Калибров, Нет конечно)

[Евгений Калибров]

Расул Гитинов, и не ваш коллега? У вас код даже одинаковый

[Расул Гитинов]

Евгений Калибров, Честно, я вообще не в курсе по этому поводу

Answer 3

[Aginvlad]

https://t.me/feenproject/16