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