Parallax effect using motion detection | Hacker News Reader

Parallax effect using motion detection

wagerfield.github.io

107 pointspetrosagg33 comments

We implemented parallax for our signup form: 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

Here's a nice JS approximation of that function: http://picomath.org/javascript/erf.js.html

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?

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.

Why not 1/(1-|x|)?

Very cool. Saw something similar on HN earlier today: 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.

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"

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?

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.

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.

Why is Firefox so shit?

It was nice and fast for me on Firefox Nightly (31) but slow on the current release version.

I'm not using any special firefox, but I got a very smooth and slick experience.

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.

Cool! Now someone should add head tracking to it:

https://github.com/auduno/headtrackr/

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.

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

You're not alone. The effect is nauseating.

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/

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.

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

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.

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

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.

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

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

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

Use a tablet, not a laptop. ;P

It works great in IE11 on my Surface 2, for what it's worth.

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

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

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

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.

barf

Reply on news.ycombinator.com