Как запустить скрипт движения элемента в момент его видимости (при скролле)?

Question

[Valery23]

Есть код, который запускает движение четырех элементов на одной странице:

jsfiddle.net/u8c0ebft

Как сделать так, что бы движение каждого элемента начиналось только тогда, когда он показывается на экране?

Comments

[camelCaseVlad]

о каких четырех элементах идет речь? в данном фидле их не вижу, только прогрессбар

[Valery23]

camelCaseVlad, исправил. Посмотрите пожалуйста

[camelCaseVlad]

Вот, что я вижу:

Answer 1

[Михаил Власов]

Можно воспользоваться библиотекой типа wow.js либо самому написать что-то вроде этого

$(document).on('scroll', function () {
     var $height = $(this).scrollTop();
     var $nav = $(класс для элемента до которого нужно доскролить);
     var vTop = ($nav.offset().top - parseFloat($nav.css('margin-top').replace(/auto/, 0)));
     $height >= vTop ? $('body').addClass(тут класс для элемента) : $('body').removeClass(тут класс для элемента);
});

Comments

[Valery23]

Не работает ваш код. А подскажите, каким образом можно через wow.js ? Он как раз у меня подключен.

[Михаил Власов]

https://wowjs.uk/docs

[Valery23]

А каким образом анимация будет работать в другую строну при скролле в другую сторону? + постоянно, а не один раз?