HTML5 旋转/动画背景答案

【问题标题】：HTML5 rotating/animated backgroundHTML5 旋转/动画背景
【发布时间】：2011-06-02 17:51:05
【问题描述】：

你会如何去创造这样的东西

http://www.bikingboss.com/

（水平移动鼠标）。我只想要一些通用指南/最少的代码，你在哪里被盯着看，我已经学习了一些 HTML5 (diveintohtml5.ep.io)，我认为这与画布有关，我说的对吗？

【问题讨论】：

除非你真的想要这些的 canvass 实现，否则请移除 html5 和 canvas 标签。
我认为我不能/有人打败了我

标签： javascript jquery css jquery-animate

【解决方案1】：

这只是一个视差效果。 http://webdev.stephband.info/parallax.html 甚至还有 jQuery 插件。

【讨论】：

好发现，OP 链接的站点似乎实际上是使用该插件构建的：jquery.jparallax.js

【解决方案2】：

这不是 HTML5。

这是一系列相互叠加的元素，每个元素都有不同的背景图像，当鼠标移动时会更新位置。

对于那个页面，元素是UL#parallax：

<ul id="parallax">
    <li id="mountain-1" style="position: absolute; left: 18.498%; margin-left: -332.964px; top: 28.0208%; margin-top: -134.5px;"></li>
    <li id="mountain-2" style="left: 50%; position: absolute; margin-left: -905.494px; top: 28.0208%; margin-top: -134.5px;"></li>
</ul>

如果您使用 Firebug 并打开此元素，您会看到 left 和 margin-left CSS 值随着您的鼠标移动而更新。

【讨论】：

打败我。同意，并非所有移动且非 Flash 的东西都是 html5 :)

【解决方案3】：

CSS background-position 属性可能会完成所有这些。只需使用 javascript 设置一些鼠标移动处理程序来更改背景元素的位置（您需要有多个，因为那里有多层图像）。

【讨论】：