基于滚动的动画:如何创建它们

Question

我看到了一个网页：http://www.wsj.com/ad/cocainenomics

它准确地显示了我想学习创作的那种动画。

没有什么非常复杂的东西，只是在用户滚动页面时出现的元素或层(不要考虑英雄视觉上的“粉状”动画)。

什么技术/编程语言/ js-based library，你专家建议动画师，作为最好的选择来实现这一点？

我在考虑：

• 纯jQuery动画
• jQuery触发css3动画
• 具有最小velocity.js-based的jQuery方法仅用于将动画调用链接到jQuery元素对象

你们认为这两个人之间有什么更好的方法？或者你还有别的想法？

你认为velocity.js强大的力量对于这么简单的动画来说是不相称的吗？我看过速度演示，它们比上面的网站包含的scroll-based动画要复杂得多。

Answer 1

我以前在这类事情上发现了斯克罗尔的成功：

• 查看https://prinzhorn.github.io/skrollr/的演示
• 看看https://github.com/Prinzhorn/skrollr的代码

编辑:我刚看过Skrollr文档，注意到大约一年前它就停止了维护。一个快速的谷歌提出了ScrollMagic作为一个可能的替代方案。我还建议深入了解您提供的示例站点的源代码，看看您是否可以深入了解它们所使用的内容！

Velocity.js并不一定是你想要的那种基于滚动位置的动画--它只是一种选择，可以和你用jQuery的animate()做同样的动作，但是用幕后的魔法来提高动画的效率。

严格地说，StackOverflow可能不是这类问题的最佳位置(参见https://stackoverflow.com/help/dont-ask的问题指南)--所以您的问题可能会被版主标记！

Answer 2

请检查这个，https://codyhouse.co/gem/vertical-timeline/，我相信这正是您想要的，请查看这里的演示：https://codyhouse.co/demo/vertical-timeline/index.html --我认为这是一个非常简单的选项，因为它是免费的和完全可定制的。(它几乎只有一个带有jquery的css )