HTML5 clone of Facebook's Paper photo tilt gesture/UX
Facebook will be releasing their new Paper app in a few days. After watching their preview video I was struck by the new gestures/UX it introduced.
While watching the video, I was thinking how I could replicate some of its features using plain HTML, CSS and Javascript.
I decided to start with the photo tilt feature, it turned out to be relatively simple to implement (at least based on what I have seen in the video)
I just pushed to Github a tool/hack called PhotoTilt which, given a photo and a container, will replicate Paper's tilt functionality.
One advantage that native currently has over the mobile web is that there is no way to stop the device from changing orientation (portrait/landscape) when tilting too much. There is an experimental feature: Screen.lockOrientation but currently only works in Firefox for web pages that are in full-screen mode.
Finally, here is a working demo. Make sure you test this on a device with a triaxial/accelerometer, like a phone/tablet, with orientation locked in portrait mode.