Question

我正在寻找一些事情like this。我正在使用this answer here中的代码，但答案从未完全清楚。建议他们使用this jquery plugin here，但我无法让它工作。我会使用第一个示例的代码，只是，我正在使用Foundation 4，进度条是随附的，并且更易于创建。此外，第二个示例中提供的动画代码更清晰 - 总体而言，第一个示例有点混乱，代码繁重且冗余。

我的代码是实时here。我正在使用about部分中的技能栏。在用户到达此点之前，应暂停动画。一旦用户滚动到页面的这一部分，动画就应该播放。

编辑：此外，如果你有任何建议，当你缩放页面时阻止栏子“破坏”他们的容器（这个网站应该是响应），我也会很感激。

EDIT2：我注意到，因为我一直在玩这个溢出：隐藏; on .progress修复了我的“破解”问题..然而，当你调整窗口大小时，大小保持在他们初始化的位置。我真实地知道访问我网站的用户很可能不会大量调整窗口大小，但对于看它的雇主来说，如果它不能正常工作，那就太蹩脚了。我在grumpy-cat按钮覆盖层上遇到了同样的问题，它以第一个尺寸进行初始化，之后不会调整覆盖层的大小。对此的建议真的非常感谢！

Answer 1

如果你知道你的技能栏在哪里，并且你知道你的屏幕在哪里，你只需要javascript。（没有插件或奇怪的东西）

要获得屏幕的垂直位置，这很简单：

 window.pageYOffset

要获得div的垂直位置，只需

 div.offsetTop

在你的情况下，我会给包裹所有技能栏的div并设置一个循环（window.requestAnimationFrame https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame）以检查你是否在div的范围内（例如，如果窗口偏移和div之间的差异小于某个数量）。

如果答案是肯定的，则触发动画。

制作动画的最佳方式是通过css过渡。（如果你需要一个很好的css动画介绍，这里有一个我觉得有用的视频：http://www.youtube.com/watch?v=VoncDvOfUkk）

您可以从javascript设置css动画。

这个想法是你将所有“米”宽度设置为0.然后在javascript中执行以下操作：

 div.style.transition = "width 1s";
 div.style.width = someValue;

我对div中包含的值的建议是“progress”div的一些常量部分，如使用％而不是em或px。这项技术应该有效。（如果你仍然有问题，你有一个window.requestAnimationFrame循环继续，所以你可以在每个时间步重新计算值...虽然...提防性能）。

你被推荐jQuery的原因是因为当你需要更新所有的div以便为它们设置动画时，只需要写$（this）.find（'。meter'）然后再添加类（'。expand '）太容易了。

希望这有帮助

滚动上的CSS技巧栏动画

1 个答案: