6 ms·

Parallax effect using motion detection

107 points by petrosagg 13y ago

robgering 13y ago
The design and illustrations are amazing. Unfortunately this kind of effect gives me immediate and lasting vertigo (lasts a couple of minutes past viewing the site) when used to this degree. I'm not sure if I have an extra sensitivity to the effect.
- floatingatoll 13y ago
  I also received immediate vertigo and had to close the tab and still feel sick. Interestingly, it's the same vertigo I receive when someone rotates an arm-mounted screen while I'm playing an FPS game on it. I had no idea it was possible to reproduce that with simple 2D effects. Science for the win, though my stomach does not thank me. This artistic style of depth, or what little I could discern before I had to close the page at least, reminds me very strongly of the iOS game 'Ramp Champ'.
- homersapien 13y ago
  You're not alone. The effect is nauseating.
symmetricsaurus 13y ago
Pretty cool! But the performance is too sluggish for there to be any 3d illusion on my 2013 nexus 7. With a more subtle effect and better response time it could work.
coreymgilmore 13y ago
Very cool. Saw something similar on HN earlier today: https://news.ycombinator.com/item?id=7505644 https://news.ycombinator.com/item?id=7505644 Check it out. Parallax cannot be used everywhere, but there are a lot of cool uses for it. I can see a big use for showcasing how apps can be used rather than just slides or pages of pictures.
- jonahx 13y ago
  This is impressive and gorgeous, but it's so confusing. Seems like a terrible idea for business websites, but would have been perfect for something like the website for the TV show "Lost"
nickporter 13y ago
We implemented parallax for our signup form: http://42debut.com/#/demo/signup http://42debut.com/#/demo/signup The key is to feed the mouse position or device orientation into this easing function: https://en.wikipedia.org/wiki/Error_function https://en.wikipedia.org/wiki/Error_function Here's a nice JS approximation of that function: http://picomath.org/javascript/erf.js.html http://picomath.org/javascript/erf.js.html
- alepper 13y ago
  I'm curious - it seems a little around-the-houses to have to use an approximation to erf when it's not obviously relevant. Why not just use an alternative sigmoid (e.g. the logistic function) or whatever the trigonometric solution falls out to be if you model it as a 'real' slewing or rotation motion around the scene?
  - nickporter 13y ago
    Interesting! I honestly only used erf because that shape felt good to me. It looks like that logistic function is much simpler, and should give me pretty much the same result. But modelling it as a real scene sounds awesome, I'll experiment.
- 3rd3 13y ago
  Why not 1/(1-|x|)?
MasterScrat 13y ago
Cool! Now someone should add head tracking to it: https://github.com/auduno/headtrackr/ https://github.com/auduno/headtrackr/
ryanwhitney 13y ago
Looks amazing, and is pretty responsive on a 4S after the few seconds of loading… Wish the browser UI wasn't in the way viewing in landscape though. This would be an awesome page to implement Mobile Safari's new minimal-ui viewport property on: http://darkblue.sdf.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html http://darkblue.sdf.org/weblog/ios-7-dot-1-mobile-safari-min...
Trufa 13y ago
Incredibly cool but seems to have a lot of trouble in the Nexus4.
- mhandley 13y ago
  Odd, worked OK on my Nexus 4. But it seems the parallax is reversed when the phone is in portrait move - when I tilt the phone to look behind the lighthouse, the background moves the wrong way. It moves the opposite way when in landscape mode. Somewhat disconcerting.
FiddlerClamp 13y ago
It doesn't work in Chrome on the Surface Pro, alas.
- BlakePetersen 13y ago
  Use a tablet, not a laptop. ;P
- Encosia 13y ago
  It works great in IE11 on my Surface 2, for what it's worth.
Ryel 13y ago
This background from Google Ventures is one of my favorites http://www.gv.com/lib/design-details http://www.gv.com/lib/design-details
Geee 13y ago
The effect doesn't seem to work on iPhone 5. Animation runs fine but no parallax.
nbush 13y ago
If you want to take the effect to its hilarious conclusion, you can even do depth of field using SVG filters: http://nbush.github.io/depth/ http://nbush.github.io/depth/
- ygra 13y ago
  Except that Gaussian blur does not approximate how we see things blurry outside the focal plane. Our pupils are not shaped like a bell curve with smooth falloff at the edges, instead they are round, thus requiring a different convolution kernel.
mey 13y ago
Things go a little sideways at 1920x995, the clouds start to disappear/flicker on movement and the ropes they are hanging on are gone.
cclogg 13y ago
This is really cool but it actually brings up a question I've had for a while: Is Firefox super slow with graphics? This was incredibly jittery on Firefox for me (my main browser), so I downloaded Chrome quickly to test there... and it ran super smooth. It also ran smooth on my iPad 2. I'm asking this because I was getting into HTML5 canvas recently, and noticed on Firefox that even a very simple canvas animation is laggy. What's the deal?
- camus2 13y ago
  The deal is firefox browser engine is slower than chrome's.Doesnt mean javascript slower per say,but the engine responsible for rendering anything on the screen is.And asmjs or whatever is not going to improve that.
- spyder 13y ago
  Yes, it's laggy on Firefox compared to Chrome and eats all of the CPU (with two cores), so this shouldn't be used on any website. But it looks like it's just updating the positions of HTML elements and it's not using HTML5 canvas.
- verroq 13y ago
  Why is Firefox so shit?
- rangibaby 13y ago
  It was nice and fast for me on Firefox Nightly (31) but slow on the current release version.
- mpnordland 13y ago
  I'm not using any special firefox, but I got a very smooth and slick experience.
- pornel 13y ago
  For me it's super-slow in Chrome-based Opera, but fast in Chrome and Firefox Nightly on the same machine. The page's performance might be very dependent on browser's heuristic for conserving memory vs using GPU accelerated layers.
trevordixon 13y ago
This should work on my MacBook Pro if you don't test the user agent string to determine support.
ommunist 13y ago
Incredibly nice effect. But it is so unfortunately not very well working with FF, so for websites with significant part of FF users it is a no to use it. Personally I admire your effort. Imagine the interface where you should put the ball into the hole to achieve a menu item. Will work only on smart devices with gyroscope, however.
tdimaline 13y ago
Surprisingly, performance on IE9 on an old-ish computer is perfect. It seems to be better than Firefox too.
plg 13y ago
barf

107 points by petrosagg 13y ago

The design and illustrations are amazing. Unfortunately this kind of effect gives me immediate and lasting vertigo (lasts a couple of minutes past viewing the site) when used to this degree. I'm not sure if I have an extra sensitivity to the effect.

floatingatoll 13y ago
I also received immediate vertigo and had to close the tab and still feel sick. Interestingly, it's the same vertigo I receive when someone rotates an arm-mounted screen while I'm playing an FPS game on it. I had no idea it was possible to reproduce that with simple 2D effects. Science for the win, though my stomach does not thank me. This artistic style of depth, or what little I could discern before I had to close the page at least, reminds me very strongly of the iOS game 'Ramp Champ'.
homersapien 13y ago
You're not alone. The effect is nauseating.

symmetricsaurus 13y ago

Pretty cool! But the performance is too sluggish for there to be any 3d illusion on my 2013 nexus 7. With a more subtle effect and better response time it could work.

coreymgilmore 13y ago

Very cool. Saw something similar on HN earlier today: https://news.ycombinator.com/item?id=7505644 https://news.ycombinator.com/item?id=7505644 Check it out. Parallax cannot be used everywhere, but there are a lot of cool uses for it. I can see a big use for showcasing how apps can be used rather than just slides or pages of pictures.

jonahx 13y ago
This is impressive and gorgeous, but it's so confusing. Seems like a terrible idea for business websites, but would have been perfect for something like the website for the TV show "Lost"

nickporter 13y ago

We implemented parallax for our signup form: http://42debut.com/#/demo/signup http://42debut.com/#/demo/signup The key is to feed the mouse position or device orientation into this easing function: https://en.wikipedia.org/wiki/Error_function https://en.wikipedia.org/wiki/Error_function Here's a nice JS approximation of that function: http://picomath.org/javascript/erf.js.html http://picomath.org/javascript/erf.js.html

alepper 13y ago
I'm curious - it seems a little around-the-houses to have to use an approximation to erf when it's not obviously relevant. Why not just use an alternative sigmoid (e.g. the logistic function) or whatever the trigonometric solution falls out to be if you model it as a 'real' slewing or rotation motion around the scene?
- nickporter 13y ago
  Interesting! I honestly only used erf because that shape felt good to me. It looks like that logistic function is much simpler, and should give me pretty much the same result. But modelling it as a real scene sounds awesome, I'll experiment.
3rd3 13y ago
Why not 1/(1-|x|)?

MasterScrat 13y ago

Cool! Now someone should add head tracking to it: https://github.com/auduno/headtrackr/ https://github.com/auduno/headtrackr/

ryanwhitney 13y ago

Looks amazing, and is pretty responsive on a 4S after the few seconds of loading… Wish the browser UI wasn't in the way viewing in landscape though. This would be an awesome page to implement Mobile Safari's new minimal-ui viewport property on: http://darkblue.sdf.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html http://darkblue.sdf.org/weblog/ios-7-dot-1-mobile-safari-min...

Trufa 13y ago

Incredibly cool but seems to have a lot of trouble in the Nexus4.

mhandley 13y ago
Odd, worked OK on my Nexus 4. But it seems the parallax is reversed when the phone is in portrait move - when I tilt the phone to look behind the lighthouse, the background moves the wrong way. It moves the opposite way when in landscape mode. Somewhat disconcerting.

FiddlerClamp 13y ago

It doesn't work in Chrome on the Surface Pro, alas.

BlakePetersen 13y ago
Use a tablet, not a laptop. ;P
Encosia 13y ago
It works great in IE11 on my Surface 2, for what it's worth.

Ryel 13y ago

This background from Google Ventures is one of my favorites http://www.gv.com/lib/design-details http://www.gv.com/lib/design-details

Geee 13y ago

The effect doesn't seem to work on iPhone 5. Animation runs fine but no parallax.

nbush 13y ago

If you want to take the effect to its hilarious conclusion, you can even do depth of field using SVG filters: http://nbush.github.io/depth/ http://nbush.github.io/depth/

ygra 13y ago
Except that Gaussian blur does not approximate how we see things blurry outside the focal plane. Our pupils are not shaped like a bell curve with smooth falloff at the edges, instead they are round, thus requiring a different convolution kernel.

mey 13y ago

Things go a little sideways at 1920x995, the clouds start to disappear/flicker on movement and the ropes they are hanging on are gone.

cclogg 13y ago

This is really cool but it actually brings up a question I've had for a while: Is Firefox super slow with graphics? This was incredibly jittery on Firefox for me (my main browser), so I downloaded Chrome quickly to test there... and it ran super smooth. It also ran smooth on my iPad 2. I'm asking this because I was getting into HTML5 canvas recently, and noticed on Firefox that even a very simple canvas animation is laggy. What's the deal?

camus2 13y ago
The deal is firefox browser engine is slower than chrome's.Doesnt mean javascript slower per say,but the engine responsible for rendering anything on the screen is.And asmjs or whatever is not going to improve that.
spyder 13y ago
Yes, it's laggy on Firefox compared to Chrome and eats all of the CPU (with two cores), so this shouldn't be used on any website. But it looks like it's just updating the positions of HTML elements and it's not using HTML5 canvas.
verroq 13y ago
Why is Firefox so shit?
rangibaby 13y ago
It was nice and fast for me on Firefox Nightly (31) but slow on the current release version.
mpnordland 13y ago
I'm not using any special firefox, but I got a very smooth and slick experience.
pornel 13y ago
For me it's super-slow in Chrome-based Opera, but fast in Chrome and Firefox Nightly on the same machine. The page's performance might be very dependent on browser's heuristic for conserving memory vs using GPU accelerated layers.

trevordixon 13y ago

This should work on my MacBook Pro if you don't test the user agent string to determine support.

ommunist 13y ago

Incredibly nice effect. But it is so unfortunately not very well working with FF, so for websites with significant part of FF users it is a no to use it. Personally I admire your effort. Imagine the interface where you should put the ball into the hole to achieve a menu item. Will work only on smart devices with gyroscope, however.

tdimaline 13y ago

Surprisingly, performance on IE9 on an old-ish computer is perfect. It seems to be better than Firefox too.

plg 13y ago

barf