HTML5 rotating/animated background

Question

How would you go about creating something like this

http://www.bikingboss.com/

(move your mouse horizontally). I just want some general guidelines/ minimal code, where do you get stared, I've learnt some HTML5 (diveintohtml5.ep.io), and I was thinking this would have something to do with canvas, am I right?

Answer 1

It's just a parallax effect. There is even jQuery plugin for that http://webdev.stephband.info/parallax.html .

Answer 2

It's not HTML5.

It's a series of elements that overlay each other, each with a different background image, which update position when the mouse moves.

For that page specifically, the element is 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>

If you use Firebug, and open this element, you'll see that the left and margin-left CSS values are updating as you move the mouse.

Answer 3

CSS background-position attribute could probably do all of that. Just set some mouse movement handler with javascript to change the position of background elements (you'd need to have multiple as there are multiple layers of images there).