Creating iOS 7 Homescreen Parallax Effect in the Browser

For all you techies out there, here is an article that should get your juice flowing.

John Allsopp has put together a neat tutorial on how you can implement some of the more notable design effects in iOS 7 using purely web technologies.

John Allsopp:

Today we are going to look at one of the features that got some attention, the use of parallax on the homescreen to create a sense of depth This is one of the words that Apple used to describe their new, supposedly “flat” design.

It got me thinking, how did they do that? How easy would it be to replicate using web technologies?

Before we jump in and build it, you can take a look at the finished product on a smartphone, or emulated in your browser to get a sense of what we’re going to be doing.

We’ve all seen parallax effects before. They’re a staple of 2D, and “2.5D” games, to add the perception of distance between objects. For the last couple of years we’ve also seen the use, and abuse, of parallax and scrolling in web page design.

So, what is going on to create what appears at a glance to be a 3^rd dimension? Well I’ll let you in on a little secret that anyone who has installed the iOS 7 beta will have already noticed. The effect is particularly impressive when viewing a 2D rendering (such as a video) of the effect. When you see the same effect on a device, and then watch a video of the effect on the device, I think you’ll find the video more compelling.

Allsopp also provided readers with some background information about Parallax

According to Allsopp:

Look out the window. Objects at different distances move at different relative speeds. The closer an object, the more quickly it appears to be moving, and the further away it is, the more slowly it appears to be moving.

Documentary film makers, who often have only photographs or paintings to use as their primary visual material, commonly make use of this to trick our eyes into seeing a 3^rd dimension. It’s called “the Kid Stays in the Picture” effect. It tricks our brain that we are looking at a 3D scene, by using different relative motions.

In the iOS 7 homescreen situation, we have two levels of depth. The surface of the screen, and the background image. If you pay attention to the animated version, you’ll see that the icons don’t move relative to the surface of the screen. The effect is created purely by moving the background image relative to the icons. Notice how as we tilt the phone from right to left (on the screen) the background image moves toward the right, and as the phone tilts from left to right, the image moves back to the left. Why does this create a sense of depth? For the moment, to keep things simple let’s just worry about rotation around a line running from the top to the bottom of the screen through its middle as the device is facing toward us. That is, when we tilte the phone left and right.

Now, that guy knows his stuff.  Check out the full post here.

Looking down on the scene

Looking down on the scene, having rotated the phone to the left