HTML5 вращающийся / анимированный фон

Question

Как бы вы создали что-то вроде этого

http://www.bikingboss.com/

(двигайте мышь горизонтально). Я просто хочу некоторые общие рекомендации / минимальный код, где вы смотрите, я выучил некоторые HTML5 (diveintohtml5.ep.io), и я думал, что это будет как-то связано с холстом, я Я прав?

Answer 1

Это просто эффект параллакса. Для этого есть даже плагин jQuery http://webdev.stephband.info/parallax.html.

Answer 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 и откроете этот элемент, вы увидите, что значения CSS left и margin-left обновляются при перемещении мыши.

Answer 3

Атрибут

CSS background-position может сделать все это. Просто установите какой-нибудь обработчик движения мыши с помощью javascript, чтобы изменить положение фоновых элементов (вам нужно иметь несколько, так как там несколько слоев изображений).