@fl4sh1

Как сделать так, чтобы при скролле и достижении низа сайта, быстро начинали считаться цифры статистики?

День добрый, хочу сделать ненавязчивый эффект. Заходит человек на лэндинг, скроллит и когда доходит до момента со статистикой, цифры начинают с нуля быстро считаться до определенной суммы
  • Вопрос задан
  • 375 просмотров
Решения вопроса 1
$(window).scroll(function() {
        $('#site-promo').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+300) {
                $('.way-img').addClass("stretchRight vv");
            }
        });
    });

Что делает код?
Берет id (например ваш блок с цифрами, которые нужно анимировать), когда пользователь скроллит до этого блока, за 300 пикселей до этого блока срабатывает присвоение анимации блоку .way-img.

Аналогично с вашей задачей: в id вставляете айди контейнера с цифрами, после чего присваиваете каждой цифре анимацию, за это отвечает эта строка (подправите под себя):
$('.way-img').addClass("stretchRight vv");
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@AntonSu
Начинающий Front-end разработчик
Как вариант использовать jquery.animateNumber.
aishek.github.io/jquery-animateNumber
И использовать условие для его запуска что-то типа этого:
if (($(document).scrollTop() + $(window).height()) > ($('.animate-number-block').offset().top + 100)) {
animate_number();
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы
22 нояб. 2024, в 12:20
10000 руб./за проект
22 нояб. 2024, в 11:53
3000 руб./за проект
22 нояб. 2024, в 11:51
20000 руб./за проект