5 ms·
iOS 7 Parallax Background in JS
- sabalaba 13y agoNice implementation. One thing to note is that this doesn't seem work on desktop browsers; open it on your phone!
- killercup 13y agoIt actually works for me on my MacBook (in Chrome)!
- joeblau 13y agoWhich 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 13y agoWorking nicely here too. Late 2008 MacBook unibody 13"
- jwillgoesfast 13y agothis is so crazy, never knew my 2007 macbook could have the accelerometer utilized via a browser.
- rbritton 13y agoDoesn't seem to account for orientation on an iPad 4 but works fine otherwise.
- driverdan 13y agoI'm not sure what this is supposed to do, it doesn't work for me in Chrome 28. I get 2 JS errors.
- 3rd3 13y agoIt needs an accelerometer.
- randallu 13y agoI 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 13y agoThat'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
- juandopazo 13y agoNice! 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 13y agoCould it be due to the hardware?
- mgraczyk 13y agoDoes not work on my Nexus 4
- daughart 13y agoI 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.
- crazygringo 13y agoThe 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 13y agoIt works on my Mac! But you have to tilt the whole computer..
- acchow 13y agoWorks on Chrome for Android.
- LinaLauneBaer 13y agoI 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 13y agoWarning: 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
- swinglock 13y agoThe 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 13y agoSide note: Github's 404 page does that too. Even on mobile: https://github.com/404 https://github.com/404
- chasing 13y agoAs 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 13y agoHi, 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.