@pashabomber

Как запустить анимацию цифр только после прокрутки до них?

Добрый день!

Сайт thermoplan.volodin-web.ru
Если прокрутить ниже, то там будет блок с четырьмя числами с красных кругах. Если обновить страницу, то увидите анимацию этих чисел. Проблема в том, что пока пользователь доходит до этого блока, анимация уже завершается и посетитель ее по факту не видит.
Как сделать так, чтобы она запускалась только когда юзер опустится до этого блока?

JS, отвечающий за анимацию чисел - thermoplan.volodin-web.ru/js/index.js
  • Вопрос задан
  • 1223 просмотра
Пригласить эксперта
Ответы на вопрос 3
Нужно определить, что блок находится в области обзора.
Чтобы это сделать - нужно повесить обработчик на событие скролла контейнера и при помощи offset и scrollTop определять, находится ли нужный блок в видимой области. Как только оказывается - запускаем анимацию.
Ответ написан
lacrim
@lacrim
Отшибленный на всё голову экспериментатор.
Поделюсь своим рецептом, использованным для срабатывания animate.css при скролле

if (imagePos < topOfWindow+400) {
              $(this).addClass('animated bounceInUp');
    }


Просто замените строку $(this).addClass... на вашу функцию
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 июл. 2021, в 00:00
2000 руб./за проект
27 июл. 2021, в 22:00
25000 руб./за проект
27 июл. 2021, в 21:59
1500 руб./за проект