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

Question

[pashabomber]

Добрый день!

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

JS, отвечающий за анимацию чисел - thermoplan.volodin-web.ru/js/index.js

Answer 1

[Николай]

Нужно определить, что блок находится в области обзора.
Чтобы это сделать - нужно повесить обработчик на событие скролла контейнера и при помощи offset и scrollTop определять, находится ли нужный блок в видимой области. Как только оказывается - запускаем анимацию.

Comments

[pashabomber]

к сожалению, не силен в js, потому и обратился сюда за помощью.

[Николай]

pashabomber: ну за вас никто писать не будет, если бы вы попробовали у вас не получилось - это другое дело.

Answer 2

[Vitaly Sivkov]

Есть такой плагин, возможно вам подойдет: https://github.com/xobotyi/jquery.viewport

Answer 3

[lacrim]

Поделюсь своим рецептом, использованным для срабатывания animate.css при скролле

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

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