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

时间:2015-10-14 23:34:21

标签: javascript jquery css3 animation velocity.js

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

它显示了我想要学习创建的动画类型。

当用户滚动页面时,没有任何大量复杂的元素或图层(不要考虑英雄视觉上的'粉末动画)。

什么技术/编程语言/ js-based library你会将动画师的建议作为实现这一目标的最佳选择吗?

我考虑过:

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

你们之间认为哪种方法更合适?或者你还有别的想法吗?

您是否认为velocity.js的强大力量与动画不成比例这么简单?我已经看过速度演示,它们比上述网站包含的scroll-based动画更复杂。

2 个答案:

答案 0 :(得分:0)

请检查一下,https://codyhouse.co/gem/vertical-timeline/我相信它正是您要找的,请在此处查看演示:https://codyhouse.co/demo/vertical-timeline/index.html 我相信它是一个非常简单的选择,因为它是免费的,完全可定制的。 (也几乎只有一点点jssery的css)

答案 1 :(得分:0)

我之前为Skrollr找到了成功的事情:

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

Velocity.js不一定是你要专门针对你正在寻找的基于滚动位置的动画的东西 - 它只是一个替代选项,可以像你一样做同样的事情jQuery的animate(),但具有幕后魔术,使动画效率更高。

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