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

标签 javascript jquery css animation velocity.js

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

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

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

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

我正在考虑:

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

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

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

最佳答案

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

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

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

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

关于javascript - 基于滚动的动画: how to create them,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33137435/

相关文章:

javascript - css html 仅将鼠标悬停在字母/字符区域上

javascript - 如果localStorage中存在数据,如何返回它,或者执行AJAX请求?

javascript - 在表单中捕获 iPhone 键盘下一个按钮按下事件

javascript - 从子域使用主域的js和css

javascript - 为 react/react-intl 动态导入语言 json 文件

javascript - 从输入中获取数据以用作 JavaScript 中的对象

javascript - 上传两个文件,处理它们并下载新文件,无需重定向

css - 使网格区域具有相同的高度

javascript - 如何在弹出窗口中发送选定的下拉值

javascript - 使用 ScrollMagic 和 GSAP 进行水平滚动