iOS 7 Parallax Background in JS

http://jsbin.com/elikon/1

by donohoe • 13 years ago

32 29 13 years ago

jsbin.com

sabalaba• 13 years ago

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

killercup2• 13 years ago

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

joeblau• 13 years ago

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.

Blu3t00th• 13 years ago

Working nicely here too. Late 2008 MacBook unibody 13"

jwillgoesfast• 13 years ago

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

rbritton• 13 years ago

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

driverdan• 13 years ago

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• 13 years ago

It needs an accelerometer.

randallu• 13 years ago

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

crazygringo2• 13 years ago

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

juandopazo• 13 years ago

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• 13 years ago

Could it be due to the hardware?

mgraczyk• 13 years ago

Does not work on my Nexus 4

tremendo• 13 years ago

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

swatkat• 13 years ago

Works fine in my Nexus 4. Chrome.

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

Spittie• 13 years ago

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

daughart• 13 years ago

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.

crazygringo2• 13 years ago

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• 13 years ago

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

acchow• 13 years ago

Works on Chrome for Android.

LinaLauneBaer• 13 years ago

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.

andymatuschak• 13 years ago

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

swinglock• 13 years ago

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.

chenglou• 13 years ago

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

chasing• 13 years ago

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!

xamde• 13 years ago

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.

iOS 7 Parallax Background in JS

Related Stories