Анимация нескольких индикаторов выполнения при прокрутке мимо точки привязки

Question

Вот мой сайт.

http://www.colleenbowes.com/

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

Это моя анимация:

Вот как будет выглядеть моя анимация CSS на каждой панели (хотя и с разной шириной)

-webkit-animation: slide 3s forwards;
-webkit-animation-delay: 3s;
animation: slide 3s forwards;
animation-delay: 3s;

@ -webkit-keyframes slide {

from {width: 0%;}
to { width: 90%; }

}

@keyframes slide {

from {width: 0%;}
to { width: 90%; }

}

Благодарю.

Answer 1

Как насчет этого:

var target = $("#skills").offset().top;
var interval = setInterval(function() {
    if ($(window).scrollTop() >= target) {
        // do your animation
        clearInterval(interval);
    }
}, 350);

Имейте в виду, что он предназначен для запуска только в первый раз, когда он виден... не уверен, если это ожидается. Кроме того, поскольку вы не описываете свою анимацию, я только что добавил код, который должен определять вашу прокрутку. Если вы добавите немного больше деталей в вашу анимацию, я мог бы расширить ответ.

Надеюсь это поможет.