我正在尝试构建一个在HTML5上的每个滚动条上移动的动画。像这个网站http://www.puma.com/mobium/。它仅在滚动时移动。
阅读之后，我觉得它可能是一个.gif在滚动播放。所以我在画布上逐帧创建了一个gif，这样我就可以控制帧了。但是现在，它在窗口打开时自动播放。根据我所做的研究，他们主要是在滚动时播放.gif文件。这不是我要找的。
是否可以在每个卷轴上逐帧播放？
我是探索html5和所有这些视差事物的初学者，所以任何其他方法都可以随意提出。
答案 0 :(得分：3)
看起来大多数动画都是由名为TweenLite js的JavaScript库处理的。它的工作方式类似于Flash中的补间。 TweenLite基本上将对象从一个移动到另一个。滚动由Jquery鼠标滚轮插件捕获
在puma mobium中，您看到的很多动画都来自精灵图像。
Backgrouds：
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
Audio连续播放
正如你可以看到它们中的大多数是精灵，还有来自TweenLite的CSSPLugin用于控制动画的css属性。
所以滚动鼠标时，精灵中图像的位置会移动，看起来像是眼睛的动画。图像的位置由CSSplugin的背景位置属性改变，mosuewheel jquery js用于鼠标滚动
除了移动滚动。动画也由左右箭头控制。
上面的链接清楚地解释了开始使用TweenLite Js的基础知识。
您可以在Chrome开发者工具的网络标签中找到精灵图片。 希望这些信息可以帮到你！
