Q

HTML5旋转/动画背景

2011-06-02 106 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

相关问题