I decided that it would be cool if header image on my blog would react to mobile device physical orientation(like IOS wallpaper). With new w3c specification this task is very trivial but you may encounter some difficulties with different way the browsers return orientation values.

Example code

// First we add event listeners for MozOrientation and device orientation event. It will pass us event
window.addEventListener("MozOrientation",    handleOrientationEvent, true);
window.addEventListener("deviceorientation", handleOrientationEvent, true);

// now we create our callback function for orientation events
function handleOrientationEvent(event) {
  // Declare our variables
  var x, y, z = 0;
  // Read rotation around Z axis. It will be ranging from 0 to 360
  z = event.alpha;
  // Read rotation around X axis. For firefox it will be ranging from -90 to 90 for webkit and -180 to 180 for firefox
  x = event.beta;
  // Read rotation around Y axis. For firefox it will be ranging from -180 to 180 for webkit and -90 to 90 for firefox
  y = event.gamma;
  // Output orientation to console
  console.log("x,y,z", [x,y,z]);

More Docs


Run this page on mobile phone with accelerometer. You should see moving header.