Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
HTML5 Device Orientation API Demo
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
images
js
.gitignore
8ballurl.png
README.md more known bugs
index.html

README.md

Magic 8 Ball - HTML5 Device Orientation API Demo

This is a visual demonstration of how the HTML5 device oprentation works. See the W3C specification at: http://www.w3.org/TR/orientation-event/

Best to try on the mobile browsers that support device orientation and 3D transform. e.g. iOS Safari, Android browser 3+, Chrome for Android, Firefox Mobile. The demo works on Opera Mobile, however, the triabgle does not animate in 3D.

Live Demo URL

http://girliemac.github.com/magic8ball/

Short URL for mobile

http://goo.gl/5Cj4d or use the QR below

QR for the URL

QR Code for http://goo.gl/5Cj4d

Known Bugs

  • The "answer" (the text in the triangle) is super janky on Firefox Mobile. Firefox doesn't seem to update the text quickly as the trianle shapes transforms.
  • This demo eats up the battery like crazy. (I have a battery status API demo on http://jsfiddle.net/girlie_mac/YcV33/ but I didn't bother adding more stuff on this demo.
  • I think the Android browser (not Chrome) is too sensitive, so even I set a device on a desk, beta and gamma keep changing the values.
Something went wrong with that request. Please try again.