Create Facebook Paper effect on your phone in HTML5

The new mobile app from Facebook called Facebook Paper has been launched for the iPhone in the US. Created by a group of star designers and engineers (operating more like a startup within the company), the app presents users with a new and attractive way to browse Facebook, while aggregating news and social feeds in one place.

Fascinated by the new gestures/UX it introduced, John Tregoning thought about replicating 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…I just pushed to Github a tool/hack called PhotoTilt which, given a photo and a container, will replicate Paper’s tilt functionality,” Tregoning writes in a blog post.

Tilting the screen enables you to explore high resolution photos, while enjoying a seamless video viewing experience within the app.

He added: “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.”

Screen.lockOrientation is an experimental feature that is said to currently only work in Firefox for Web pages that are in full-screen mode.

You can check his working demo on a device with a triaxial/accelerometer, like a phone/tablet, with orientation locked in portrait mode, Tregoning writes.

Leave a Reply