therasel
@therasel
Веб-дизайнер

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

Есть функция, которая запускает счетчик цифр:
$('.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", только эти элементы раскиданы по странице.

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

Подскажите, как правильно реализовать такую функцию, спасибо.
  • Вопрос задан
  • 71 просмотр
Пригласить эксперта
Ответы на вопрос 2
aloky
@aloky
junior js
rework
@rework
Помог ответ? В благодарность отметь его решением
Вы серьёзно? Я сегодня уже отвечал на этот вопрос и код давал Как запустить 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();
        }
    });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
18 авг. 2018, в 17:54
6000 руб./за проект
18 авг. 2018, в 16:00
60000 руб./за проект