iOS 7 Parallax Background in JS | Hacker News Reader

iOS 7 Parallax Background in JS

jsbin.com

32 pointsdonohoe29 comments

The title should really indicate that you need to open in on an iPhone.

But -- so simple, yet such a pleasant, subtle effect, and it seems to be perfectly calibrated. I'd hate to see this get overused, but it's been a very long time since I remember seeing a brand-new "tool" for a graphic designer's toolbox.

Obviously this is more suited to games, or interfaces that already include a strong 3D or motion element. But it's a remarkably natural feeling.

It works on my Mac! But you have to tilt the whole computer..

Works on Chrome for Android.

I'm not sure what this is supposed to do, it doesn't work for me in Chrome 28. I get 2 JS errors.

It needs an accelerometer.

I did something similar (but with more layers) using one of the Lytro depth images as a sample:

  http://www.infinite-imagination.com/

(This one rotates on a desktop browser, but uses the device orientation to create a 3D effect on iOS at least).

That's pretty cool. It's the black parts in between that make it "unusable" for anything serious, but still a very cool demonstration.

I wonder if you could use the same idea to produce something like the whole "wiggling 3D images" [1] thing automatically, since it would involve smaller gaps. And somehow fill in the gaps using an equivalent of Photoshop's "Content-Aware Fill", based only on the layer of the same depth -- since it would just be for narrow strips, for most things it should probably give a pretty realistic effect. I'm unaware if there's any kind of general-purpose library which does that, though. (I vaguely recall that Gimp has a similar, but less sophisticated, implementation.)

[1] https://www.google.com/search?q=wiggling+3d+images

Hi, just to round up the thread: http://bit.ly/layersdepth is a version done in GWT, less pretty, but you can also use the arrow keys to simulate an accelerometer if your device doesn't have one. Plus, it works on my old iPhone 3GS with iOS5, while most links in this thread did not.

Warning: Just as with UIScrollView, there's a lot more to getting this one right than it initially may seem...

But here's probably the next thing I'd address: http://en.m.wikipedia.org/wiki/Gimbal_lock

I really like to see things like that! Well done.

But I would like to mention that the parallax effect is only one use case of the new UI Dynamics introduced with iOS 7. Apple has built in a physics engine right into UIKit and has created a feedback loop: A action in the UI is fed back into the engine and vice versa.

Nice implementation. One thing to note is that this doesn't seem work on desktop browsers; open it on your phone!

It actually works for me on my MacBook (in Chrome)!

Which model is it? I remember the MacBooks and MacBook Pros that people use to smack to trigger actions. Developers figured out a way to take taking advantage of the motion sensor on the hard drive. I'm only asking because on my rMBP; it doesn't seem to be working.

It sorta works on my 13" rMBP, but not well.

2010 13", the last one with a Core2Duo if I remember correctly

Macs with SSDs don't need freefall sensors, and thus, no accelerometers.

Works great on my 2008-era Macbook.

Working nicely here too. Late 2008 MacBook unibody 13"

this is so crazy, never knew my 2007 macbook could have the accelerometer utilized via a browser.

Doesn't seem to account for orientation on an iPad 4 but works fine otherwise.

The steps are too big for it to feel smooth, especially when tilting diagonally. If you are close to a step and holding (reasonably) still it jitters between positions. Animating the movement between positions instead of just translating tilt to position would improve the feel of it greatly.

As with the iOS 7 background, I've found that closing one eye and looking at this sort of thing really enhances the depth effect. With two eyes open, my brain still interprets it as flat.

Regardless: Nice!

Nice! It even works on my FirefoxOS phone, though a bit slower than in Mobile Safari which is weird considering it's using 3d transforms. Maybe it's the frequency in which the deviceorientation event fires?

Could it be due to the hardware?

I think this looks nice - looking forward to seeing this in iOS7. It's a small bit of visual candy that will hopefully add usability by replacing the dimensionality lost to removing drop shadows.

Side note: Github's 404 page does that too. Even on mobile: https://github.com/404

Does not work on my Nexus 4

it does on my Nexus S, much older phone. Chrome.

Works fine in my Nexus 4. Chrome.

But, I see white border on right side, if I tilt the phone too much towards right.

Works on my Nexus 7, with Firefox (nightly) and Chrome. Firefox seems smoother.

Reply on news.ycombinator.com