A closer look at iOS 7 parallax effect

By , Jun 28, 2013

iOS 7 parallax (teaser 001)

Apple’s iOS 7 aims to delight through subtle use of lively user interface animations and effects, employing physics, translucency, smoked panels and other visual tricks to achieve its multi-layered appearance. Among them is the so-called parallax effect that creates a sense of dimension by putting your Home screen icons onto a layer separate from your background image.

It comes to life when moving your device around, which tilts the wallpaper behind the icons slightly. The effect is also observable in a few other places throughout the system and is coming to your favorite apps via new APIs in iOS 7. If you’ve ever wondered about the science behind the magic, here’s your answer…

A quick visit to Apple’s iOS 7 web page reveals little about the technology:

iOS 7 takes full advantage of technologies in iPhone, iPad, and iPod touch to push the iOS experience further. Distinct and functional layers help create depth and establish hierarchy and order.

The use of translucency provides a sense of context and place. And new approaches to animation and motion make even the simplest tasks more engaging.

Before we dive into the science behind the magic, check out Jeff’s  video showcase of the parallax effect in iOS 7.

Developer Marco Tabini lays the process out in a post over at MacWorld.

Long story short, iOS 7 couples input from the iPhone’s gyroscope and accelerometer sensors with some clever coding and a technology that was originally conceived for rocket guidance in order to create perception of perspective.

When you rotate the device around any of the three angles of motion, a gyroscope sensor inside your iPhone  tends to resist the change in orientation because of Newton’s First Law of Motion.

This allows the hardware to measure the speed and direction in which the phone or tablet is being rotated.

Working in concert with a few additional sensors called accelerometers, the gyroscope allows the device to understand the changes in its relative position with a reasonably good level of accuracy.

“Coupled with an educated guess about where you tend to keep your phone during use,” he explains, “this makes the parallax illusion possible”.

iOS 7 parallax (teaser 002)

But it’s not just your Home screen – iOS 7 uses the parallax effect when navigating open tabs in Safari, throughout action sheets such as the Share sheet.

My favorite implementation is how the wallpaper image zooms in slightly when tapping a folder. It’s another trickery necessary in order not to break the illusion that iOS 7 icons are suspended mid-air.

Apple also spent some air time promoting the parallax effect in its iOS 7 promo clip.

That Apple chose to enable the effect by default – and knowing it will be seen throughout daily use – tells me it’s found a way to make it work without consuming too much battery power (one can disable parallax in Settings > General > Accessibility > Parallax).

It’s more than a gimmick, Tabini argues:

The screen goes from being a canvas on which your apps are painted to a window into a physical world, where the faux-realism of today’s mobile apps is replaced by visuals that can feel both more synthetic and more realistic at the same time.

Indeed, developers can implement the parallax effect in their apps by using new Motion Effects APIs in iOS 7.

In other words, your favorite apps – once optimized for iOS 7 – will be able to make various user interface objects appear to move in 3D as you move the device around.

Hardware requirements for the parallax effect also partially explain why devices lacking a built-in gyro, like the iPhone 3GS and first-generation iPad, didn’t make the iOS 7 compatibility list.

Pro tip: try setting a panoramic image as your wallpaper in iOS 7 and move your device around. It’s got nothing to do with the parallax thing, but the end result is nonetheless stunning.

Tell us what you think about the parallax effect in iOS 7 down in the comments.

  • Share:
  • Follow:
  • David Gitman

    I have that option on my iphone 4 .. doest it mean I will have it too? :DDD

    • Martin

      I also have this option in iP4 but it’s not working on my iP :(

      • David Gitman

        I hope it means we will have it

      • felixtaf

        Similar thing happened to me with my iPhone 5. Turn it on and restart ur device, thats what I did. (Am not sure if iPhone 4 has parallax function)

      • David Gitman

        then why is it in our options if we dont have it…are they just messing with us?

      • Dominik Odobašić

        Say it with me. Here we go!

        B E T A! :)

      • David Gitman

        iphone 4 dont have parallax

      • Martin

        Did it like 10 times- does not work for me :(
        i4 should have parallax function. It does have gyro and function is active in menu. It’s not “must have” for me but still – would be awesome. :)

        However, I’m counting on gestures in next betas (and GM of course) – it would be great to operate without Home button

      • David Gitman

        oh man I love the dock they gave us! you need to reboot after every wallpaper but hey its awesome! try it out..
        I cant wait untill it will be running without lags

      • Martin

        You are right my friend. I hope they will optimize ios7 for our old devices a little better :) On my new ipad iOS7 is working great but in i4 not so much. But still – I simply love my i4 :) Mazel Tov!

      • David Gitman

        Mazel Tov :D I really hope beta 3 will give us more features ! I JUST LOVE IOS 7 on my iphone 4

    • Saeed Ghattas

      If you have it in the beta version then you’ll have it when the GM VERSION comes out

    • mafish

      2 options, use hdmi output to a computer/mac
      or you can use airplay to get the ios7 screen on mac and use the default recorder app avaiable by default in osx

    • Franklin Richards

      All the graphical enhancements has made my iPhone 5 a bit choppy at times. So I don’t think Parallax will make it to iPhone 4 as it is now.
      But that said it is still in Beta and Apple are coding geniuses so hopefully they can do more optimising and make it possible for the iPhone 4

      • David Gitman

        I really hope so..

  • http://www.iphoneil.net/?author=2583 Ronen Mendezitsky

    how are you guys recording your screen for the videos?

    • therealjjohnson

      I use an app called Display Rec. It does video as well as audio

      • http://www.iphoneil.net/?author=2583 Ronen Mendezitsky

        Is it in the appstore? If it is, can I get a link since I can’t find it. thx.
        My device isn’t jailbroken atm due to iOS7.

      • http://www.shahenjit.com/ Shahenjit

        I think they use an HDMI adapter connected to the iMac to record because Display Recorder is a Jailbreak app

      • therealjjohnson

        Now that i just searched the app store for it, it looks like its been removed. Came out last june or so. I still have it on my phone because i never removed it. sorry about that

    • MagnificentN

      He is basically connecting the iPhone to the computer or tv with a Lightning to HDMI Cable , and while doing to that he connects a Elgato Game Capture HD to record the signal therefore recording the device…

      • http://www.iphoneil.net/?author=2583 Ronen Mendezitsky

        Why so complicated though? How do app developers make these videos showing their apps? there has to be a simpler way

      • MagnificentN

        But this is the best way. Usually when you connect it to your mac the FPS drops out rapidly. And also there is not a Jailbreak all the time therefore you can never get Display recorder when you don’t have the jailbreak. So this is the best way.

      • http://www.iphoneil.net/?author=2583 Ronen Mendezitsky

        Well, that’s just too expensive of an option (Elgato=180$+ 50$ for the lightning connector) just to record a screen

      • MagnificentN

        Well its a long term investment…

      • XCaptainChris

        There was a non-jailbreak version that hit the App Store a way back but then got pulled. Some people still have access to it.

  • Guest

    What’s with the “install iOS 7 Beta 2 free” video?

    • Ian

      In other words, no UDID registeration required.

    • Elias Chao

      Is the same procedure as beta 1.

    • http://www.idownloadblog.com/author/dujkan Christian Zibreg

      fixed that

  • Jayavignesh Vicky

    wat software and acceroies are you using for your youtube videos

  • Mohammad Ridwan

    This is nothing new…. Cydia had this forever…. Apple bringing unnecessary gimmicks just like Same-sungs…. :/

    • Danuel Carr

      That’s not actually true. I know the cydia tweaks you are speaking of and they move the wallpaper, not the icons. The depth effect is only created when the icons move.

      • Dominik Odobašić

        DeepEnd, look it up. Parallax is a ripoff, just like multitasking and Safari tab switching interface, to name a few.

      • Danuel Carr

        Did you even read the comment? I know what DeepEnd is and, as I said, it moves the wallpaper. The depth is created when the icons move. I know the other features are copied and I’m not complaining. We’ve been asking for Apple to incorporate those tweaks for years, and now that they have, I’m glad, not mad.

      • Dominik Odobašić

        I believe it is the wallpaper that moves around, not the icons. But then, I haven’t tested out the beta, so what do I know? The effect is essentially the same.
        I thought Apple was unique and innovative? Why did they rip others off? That is why I am disappointed.

      • Danuel Carr

        1. It’s the icons
        2. The effects are different. I have DeepEnd installed and its not as good.
        3. Apple never said that the new software was “innovative”. In fact they haven’t marketed their new products as “innovative” for quite some time. That’s just a stereotype that has me to be associated with the company. People need to realize that Apple is just another tech company and that they shouldn’t be expected to revolutionize technology as we know it every time they release something new. Apple does have their own unique style and design and that sets them apart from the drothes of hideously designed yet feature-rich android phones.

      • Dominik Odobašić

        I am well aware of everything you said. My comment was a sarcastic remark to those who actually believe it. I agree with you completely. +1

      • Danuel Carr

        Oh my apologies. You know, someone really needs to create a sarcasm font.

      • Dominik Odobašić

        No need to apologize, really. In a way, we already have that

        ability.

        :)

      • Manish Rana

        fandroids can innovate every day :P

      • Hey

        Don’t know why these guys are arguing with you. You are right, it’s the wallpaper that moves. It’s a really basic effect. The wallpaper is zoomed in (so when it moves you don’t see black edges), then it uses the gyroscope to detect what direction the device is being tilted, and the wallpaper moves the opposite direction.

      • Manish Rana

        fandroids will never understand it.

    • disqus_GdtjDjsrP0

      There’s been an app on Android that provides a parallax effect since Fall 2012.

      • Manish Rana

        oh really?

      • $59603964

        Yes.

      • Cesar D

        But this is iOS. Not Android.

      • Grande PHD

        And there was already a tweak on Cydia before Android dream of it. So, what is the point of your argument now?

      • Hey

        Wasn’t trying to argue, was just stating the obvious. You, and other people on this blog need to learn people aren’t trying to start an argument by just mentioning Android. It’s very annoying.

        I know DeepEnd by Ryan Petrich provides the same effect, and I know it’s been on Cydia for a while. On Android, you don’t even have to root (sort of equivalent to jailbreaking).

  • planetcoalition

    Even alerts and action sheets have the parallax effect and it’s awesome!

    • Manish Rana

      Tell this to fandroids.

  • Carlos

    Jeff, you blew my mind by recording an iPhone with a parallax through an iPhone. Talk about hierarchy. On a serious note, I’ve had to disable it while on beta on my iPhone 4S because it seems to lag and sometimes go black. But I do admit, it’s nice when it works.

  • TBone

    iphone inside an iphone xD

    • David Villamizar

      A first I was thinking those were the app icons moving that way instead of the iPhone and asking myself wtf?

  • Elias Chao

    There’s a jailbreak tweak called DeepEnd, this tweak has done “paralax-like” effect since a lot of time :)

    • Dylfo

      The only problem is that that tweak is really glitchy

  • Gorgonphone

    I will be will to trade the prallax effect for a less looking UI

    • hush

      go f yourself already. Stupid moaning bi7ch! Go get an android.

      • Gorgonphone

        Nah i will just wait for a jailbreak

      • Hey

        Have fun really waiting. With every new OS and hardware upgrade, Apple makes it harder and harder for the people responsible for the jailbreak to exploits. So expect to wait even longer than you had to wait for the iOS 6 jailbreak.

        If you complain about iOS 7, and you complain about Android, you should just not own a cellphone, or switch to Windows Phone or Blackberry and just stop complaining.

      • hush

        Wait QUIET! Lame kid..

  • Markus Hudobnik

    My wallpaper background is not in safari tab view. :(

    • Frozen Bee .GFKS

      beta…

  • disqus_GdtjDjsrP0

    There’s really not that much to it, is there? It’s basically a zoomed in wallpaper that shifts direction based on the gyroscope/accelerometer.

    • Frozen Bee .GFKS

      yeah, but it looks kickass in real life

      • $59603964

        Oh yeah, I agree. It is a really cool illusion, I don’t quite agree with people calling it a gimmick. Sure, it doesn’t have much use, but it does look really cool to the eye.

      • Frozen Bee .GFKS

        right?! os shouldnt be just useful, but nice too! but im a bit worried some people could vomit because of that optical illusion :D *dizzy*

      • $59603964

        Aha. I hope more phones start including this feature in the coming years.

  • Taf Khan

    I would like to know what the iPhone 5s only feature iOS 7 is going to bring.. .

    • http://www.idownloadblog.com/author/dujkan Christian Zibreg

      I guess everythingh related to fingerprint scanning

      • Frozen Bee .GFKS

        i hope , so hard, that 5S will have that motherf**king fingerprint sensor! Apple pleeeeaaase! dont give us just the same for 3rd year in row!

      • Gorgonphone

        when will folks learn that “S” models are never a full upgrade???

      • Frozen Bee .GFKS

        you don’t say!! :O ……of course i know its not full upgrade, i call it 5S because it will probably be named 5S…1. Apple could implement fingerprint into 5S even if its not full upgrade and 2. im still hoping Apple will stop with this “S models” bullshiat…

      • Frozen Bee .GFKS

        and they should stop, because just like apple customers wanted something new in iOS, they want something new finally in iP too….last 3 years weren’t much innovative…

      • hush

        something new? We got bigger screen on 5. iPhone 4 got new design and 4S got Siri.. both got better camera too. I expect better camera and new software features on the 5S and new design in 6 (maybe that fingerprint scanner)

      • Taf Khan

        Finger print scanning is all well and good, along with an extra flash and upgraded processor… I’m not sure it’s going to be enough for me to want to upgrade from the iPhone 5.

  • Dylfo

    It’s simple but I love it

  • Influens

    Would be nice if added to the ios weather app

  • Amad

    You only get voice gender if you choose US english and not uk that sucks. Hope they include it in next beta.

  • Burge

    The first ipad didnt get to ios 7 cause it didnt get to ios 6. you should know this, and if you didn’t that’s poor research. People come here for the lastest info and you can not even get this right

    poor

  • Liam Mulcahy

    I love this

  • http://www.news-world.us/ arslion

    love it !!

  • Shane Sepeda

    I really wish I could turn this off

    • hush

      Settings > General > Accessibility > Parallax. Did you even watch the video?

      • Shane Sepeda

        No. I’m such an idiot. I just assumed you couldn’t toggle this! Thanks alot.

  • Mysteroy3k

    I doubt ppl will turn this off

  • FrankensteinBlack

    Another Jailbreak RIP! Yep, that Martinellis filled gas tank is just about empty…

  • @sexyhamthing

    waiting for the flood of hipsters thinking apple suddenly invented a 3d display or something. -_-

  • Guest

    Hello

    • http://www.blackberry.com/ Bobby McBobson

      hi

  • bw00ds

    Why is this under “accessibility” settings?

  • Kinderbir Gill

    Hey Jeff plz tel ma wen ios7 update coming in settings?? Plz help ..I want iOS 7 plz help ma?

  • Betty2

    I updated to Beta 2 without any registrations.

    If someone want to try it also, look at ios7beta2. tk =)

  • Mauricio Dominguez

    Well … DeppEnd by Rayn Petrich (rpetrich repo on Cydia) do the same thing … nothing new under the sun in Cupertino … sorry!

  • JRLMMUSIC

    You guys really going ccrazy over a wallpaper effect?…. This corny thing has been around for 2 years on android and while it was cool back then..we grew tired of it…within a week or so.. No one else will notice it but you and the novelty of it wares off very quickly.. But course apple will call it “magic” …. I guess it would be if you lived in a walled garden for the last 7 years.

    • Kevin Kee

      So when Apple added parallax, they added it deeply into their developer APIs making it easy for developers to add for their own apps and making it standard across the platform with in the built in apps.

      They then demo this feature in one instance… the desktop/wall paper area. But it represent a fundamental UI commitment and developers are asked to follow suite.

      Am I the only one that thinks pointing out an existing Android app will add parallax to the wallpaper is NOT the same thing?

  • Bhavin

    is this feature of “parallax” also exists in android devices?

    • Kevin Kee

      The only way Android or other platform try to mimic this, is to change their whole coding from drawing board and requires pretty high end hardware not to mention true retina (not the pentile screen ala Samsung phone) screen to display the finest details and lines. Parallax effect is the whole platform. That’s why they use thin line, thin font, and that’s why they design the icon looks flat and bright. Because only with those elements, the parallax effect for every elements (icons, texts, backgrounds, etc) will work.

  • Zoheb Khan

    IOS 7 On Iphone 5 is awesome !!!

  • Mario Eloy V. Guadiana

    is the parallax effect working on iPhone 4s?

  • Cheri Bouma

    It makes me dizzy is there a way to stop the moving?