

iOS 7 Parallax Background in JS - donohoe
http://jsbin.com/elikon/1

======
crazygringo
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.

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

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

~~~
3rd3
It needs an accelerometer.

------
randallu
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).

~~~
crazygringo
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](https://www.google.com/search?q=wiggling+3d+images)

------
xamde
Hi, just to round up the thread:
[http://bit.ly/layersdepth](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.

------
andymatuschak
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](http://en.m.wikipedia.org/wiki/Gimbal_lock)

------
LinaLauneBaer
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.

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

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

~~~
joeblau
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.

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

Works great on my 2008-era Macbook.

------
swinglock
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.

------
chasing
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!

------
juandopazo
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?

~~~
ancarda
Could it be due to the hardware?

------
daughart
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.

------
chenglou
Side note: Github's 404 page does that too. Even on mobile:
[https://github.com/404](https://github.com/404)

------
mgraczyk
Does not work on my Nexus 4

~~~
swatkat
Works fine in my Nexus 4. Chrome.

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

