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



我偶然发现了这个网页:http://www.wsj.com/ad/cocainenomics

它显示的正是我想学习创建的那种动画。

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

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

我考虑:

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

你们认为哪种方法更可取?还是你有别的想法?

你认为velocity.js的强大力量与如此简单的动画不成比例吗?我看过速度演示,它们比上面网站包含的scroll-based动画要复杂得多。

我发现以前使用Skrollr在这类事情上是成功的:

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

编辑:我刚刚看了一下Skrollr文档,注意到它大约一年前就停止维护了。在谷歌上快速搜索后,ScrollMagic成为了一个可能的选择。我还建议深入研究您提供的示例站点的源代码,看看您是否能够深入了解他们使用的是什么!

Velocity.js不一定是你想要的那种基于滚动位置的动画,它只是一个替代选择,你可以用jQuery的animate()来做同样的事情,但幕后的魔法使动画更有效率。

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

请检查这个,https://codyhouse.co/gem/vertical-timeline/我相信这正是你正在寻找的,检查这里的演示:https://codyhouse.co/demo/vertical-timeline/index.html我相信这是一个非常简单的选择,因为它是免费的,而且完全可以定制。(而且几乎只有CSS加上一点jquery)

最新更新