iOS 7 Parallax Background in JS(jsbin.com)
jsbin.com
iOS 7 Parallax Background in JS
http://jsbin.com/elikon/1
29 comments
It works on my Mac! But you have to tilt the whole computer..
Works on Chrome for Android.
I did something similar (but with more layers) using one of the Lytro depth images as a sample:
http://www.infinite-imagination.com/
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
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
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.
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.
this is so crazy, never knew my 2007 macbook could have the accelerometer utilized via a browser.
Working nicely here too. Late 2008 MacBook unibody 13"
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!
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
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.