Q

HTML5旋轉/動畫背景

2011-06-02 159 views 1 likes

1

你怎麼會去這樣HTML5旋轉/動畫背景

http://www.bikingboss.com/

創造一些（水平移動你的鼠標）。我只是想要一些通用的指導方針/最小的代碼，你在哪裏看到，我已經學會了一些HTML5（diveintohtml5.ep.io），我想這與canvas有關，對不對？

2011-06-02 johnmayne

+0

除非你真的想要這些的canvass實現，否則請刪除html5和canvas標籤。 – Trufa 2011-06-02 17:57:10

+0

我沒有想到我可以/有人打我對它 – johnmayne 2011-06-02 18:20:10

A

回答

6

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

2011-06-02 17:53:22 bjornd

+0

不錯的插件確實 – 2011-06-02 17:57:34

+0

好的發現，似乎可能由OP鏈接的網站實際上是用該插件構建的：'jquery.jparallax.js' – Nicole 2011-06-02 17:57:54

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值更新，當您移動鼠標。

2011-06-02 17:53:54 Nicole

+0

打我到它。同意，不是所有移動和不閃爍是html5 :) – Trufa 2011-06-02 17:56:00

0

CSS background-position屬性可能可以做到所有這一切。只需使用javascript設置一些鼠標移動處理程序來更改背景元素的位置（由於存在多個圖像層，您需要具有多個位置）。

2011-06-02 17:54:45 Niklas

相關問題