我正在尝试构建一个在 HTML5 上的每个滚动上移动的动画。像这个网站http://www.puma.com/mobium/。它仅在滚动时移动。
在阅读了很多之后，我认为它可能是一个在滚动上播放的 .gif。所以我在画布上逐帧创建了一个gif，以便我可以控制帧。但是现在，它会在窗口打开时自动播放。根据我所做的研究，他们主要是在滚动到 .gif 时播放它。这不是我要找的。
是否可以在每个滚动条上逐帧播放？
我是探索 html5 和所有这些视差事物的初学者，因此可以随意提出任何其他可用的方法。
2340 次
1 回答
3
看起来大部分动画都是由一个名为 TweenLite js 的 JavaScript 库处理的。这就像 Flash 中的补间一样。TweenLite 基本上将对象从一个移动到另一个。滚动由 Jquery 鼠标滚轮插件捕获
在 puma mobium 中，您看到的许多动画都来自精灵图像。
背景：
http://www.puma.com/mobium/images/scene/1024/Background_01.jpg http://www.puma.com/mobium/images/scene/1024/Background_02.jpg http://www.puma。 com/mobium/images/scene/1024/Background_04.jpg http://www.puma.com/mobium/images/scene/1024/Background_05.jpg
跑男：
http://www.puma.com/mobium/images/scene/1024/runner_0_m.png http://www.puma.com/mobium/images/scene/1024/runner_1_m.png http://www.puma。 com/mobium/images/scene/1024/runner_2_m.png
连续播放的音频
如您所见，它们中的大多数都是精灵，还有一个来自 TweenLite 的 CSSPLugin 用于控制动画的 css 属性。
所以当你滚动鼠标时，精灵中图像的位置会移动，它看起来像眼睛的动画。图像的位置由 CSSplugin 的背景位置属性更改，mosuewheel jquery js 用于鼠标滚动。
除了移动卷轴。动画也由左右箭头控制。
上面的链接清楚地解释了开始使用 TweenLite Js 的基础知识。
您可以从 Chrome 开发人员工具的网络选项卡中找到精灵图像。希望资料对你有帮助！。
于 2014-11-26T09:20:30.630 回答