Question

这是我的网站。

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

我已经把这件事搞砸了，我有点放弃了。我仍然想要它的动画，但我很困惑如何。我想要的只是当你滚过一个锚点时我的技能栏动画。

这是我的动画：

什么是我的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);

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

希望这有帮助。

滚动到锚点后，使多个进度条动画化

1 个答案: