Parallax: getting parallax events in webpage

How can I receive parallax events in javascript on a web page when it is served to an iPhone? I checked out github.com's 404 page and it is responding to movements using the accelerometer. Just try going to github.com/f7fu3f73fh39f8h3f93fh398h (or any made up page) and check out the cool parallax animation they're doing.

I looked at the source code and wasn't able to see anything special they are doing to get the events.

Solution

I think they are just using Plax

It appears from the plax example page that the accelerometer stuff is handled by that plugin.

They are only including jquery and plax in that page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="js/plax.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('#plax-sphere-1').plaxify({"xRange":40,"yRange":40})
    $('#plax-logo').plaxify({"xRange":20,"yRange":20})
    $('#plax-sphere-2').plaxify({"xRange":10,"yRange":10})
    $('#plax-sphere-3').plaxify({"xRange":40,"yRange":40,"invert":true})
    $.plax.enable()
  })
</script>

And then in plax.js lines 209-243

// Determine if the device has an accelerometer
//
// returns true if the browser has window.DeviceMotionEvent (mobile)
function moveable(){
  return (ignoreMoveable===true) ? false : window.DeviceOrientationEvent !== undefined;
}

// The values pulled from the gyroscope of a motion device.
//
// Returns an object literal with x and y as options.
function valuesFromMotion(e) {
  x = e.gamma;
  y = e.beta;

  // Swap x and y in Landscape orientation
  if (Math.abs(window.orientation) === 90) {
    var a = x;
    x = y;
    y = a;
  }

  // Invert x and y in upsidedown orientations
  if (window.orientation < 0) {
    x = -x;
    y = -y;
  }

  motionStartX = (motionStartX === null) ? x : motionStartX;
  motionStartY = (motionStartY === null) ? y : motionStartY;

  return {
    x: x - motionStartX,
    y: y - motionStartY
  };
}