
Parallax effect using motion detection - petrosagg
http://wagerfield.github.io/parallax/
======
nickporter
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
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
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.

------
coreymgilmore
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
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"

------
cclogg
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?

~~~
spyder
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.

------
MasterScrat
Cool! Now someone should add head tracking to it:

[https://github.com/auduno/headtrackr/](https://github.com/auduno/headtrackr/)

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

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

------
ryanwhitney
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...](http://darkblue.sdf.org/weblog/ios-7-dot-1-mobile-safari-minimal-
ui.html)

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

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

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

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

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

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

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

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

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

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

~~~
mhandley
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.

------
plg
barf

