John Tregoning

Blog

Facebook's Paper photo tilt in HTML5

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.

Facebook's Paper app in action

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.