滚动经过锚点时使多个进度条动画化

Question

这是我的网站。

http://www.colleenbowes.com/#skills

我已经搞砸了很多，我有点放弃了。我仍然希望它具有动画效果，但我对如何制作动画感到困惑。我想要的只是让我的技能栏在你滚动经过一个锚点时动画。

这是我的动画：

这是我的 css 动画在每个栏上的样子（虽然宽度不同）

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

@-webkit-关键帧幻灯片{

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

}

@关键帧幻灯片{

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);

请记住，这是为了运行第一次可见而设计的...不确定这是否符合预期。此外，由于您没有描述您的动画，我刚刚添加了应该检测您的滚动的代码。如果您在动画中添加更多细节，我可以扩展答案。

希望对您有所帮助。

滚动经过锚点时使多个进度条动画化

Make multiple progress bars animate when scrolled past anchor point

javascript

jquery

progress-bar