HTML5 旋轉/動畫背景

Question

你會如何 go 關於創建這樣的東西

http://www.bikingboss.com/

（水平移動鼠標）。 我只想要一些通用指南/最少的代碼，你在哪里盯着看，我學到了一些HTML5 (diveintohtml5.ep.io)，我想這與 canvas 有關，對嗎？

Answer 1

這只是視差效應。 甚至還有http://webdev.stephband.info/parallax.html的 jQuery 插件。

Answer 2

它不是 HTML5。

它是一系列相互疊加的元素，每個元素都有不同的背景圖像，當鼠標移動時會更新 position。

特別是對於該頁面，元素是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 值隨着您的移動鼠標而更新。

Answer 3

CSS background-position屬性可能會完成所有這些。 只需使用 javascript 設置一些鼠標移動處理程序來更改背景元素的 position （你需要有多個，因為那里有多層圖像）。