javascript - 基于滚动的动画: how to create them

Question

我遇到过这个网页:http://www.wsj.com/ad/cocainenomics

它准确地展示了我想学习创建的动画类型。

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

什么技术/编程语言/js-based library作为实现这一目标的最佳选择，您是否愿意向动画师提出建议？

我正在考虑:

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

你们认为哪种方法更可取？或者您还有其他想法吗？

你觉得velocity.js的威力强大吗？这么简单的动画就太不相称了吗？我看过速度演示，它们比 scroll-based 复杂得多上述网站包含的动画。

Answer 1

我发现 Skrollr 取得了成功之前处理过此类事情:

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

编辑:我刚刚查看了 Skrollr 文档，发现它大约在一年前就停止维护了。谷歌很快就找到了ScrollMagic作为一种可能的替代方案。我还建议深入研究您提供的示例网站的源代码，看看您是否可以深入了解他们使用的内容!

Velocity.js不一定是您专门针对您正在寻找的基于滚动位置的动画的类型 - 它只是一种替代选项，可以实现与 jQuery 的 animate()< 相同的功能 但通过幕后魔法使动画更加高效。

严格来说，StackOverflow 可能不是解决此类问题的最佳场所(请参阅 https://stackoverflow.com/help/dont-ask 上的问题指南) - 因此您的问题可能会被版主标记!