Device Orientation - Vertical

Overview

This is the first post in a series of four posts on experiments with the JavaScript deviceorientation event:

• One: Device Orientation - Vertical
• Two: Device Orientation - 360
• Three: Device Orientation - 3d
• Four: Device Orientation - websockets

This lab is an example of scrolling a website using the deviceorientation event reported by mobile devices.

The logic behind the event values is explained by these Dev.Opera and MDN articles.

Three values are returned by the event - alpha (α), beta (β) and gamma (γ) - that relate to the orientation of the device.

1
2
3
4
window.addEventListener('deviceorientation', handleOrientationEvent);
function handleOrientationEvent(event) {
  console.log(event.alpha, event.beta, event.gamma);
}

For this lab, we are only interested in the beta value when the device is held in portrait orientation, or gamma value when the device is held in landscape orientation.

This beta/gamma value is converted to a value that relates to a scroll position for the page.

The JavaScript file contains plenty of comments to describe the logic that calculates this value.

This is a basic implementation that doesn’t use Euler angles or Quaternions (etc) and therefore suffers from Gimbal Lock. (Read More Here).

Example video