

Show HN: Simple JavaScript Parallax effect - dkuntz2
http://dkuntz2.com/2013/06/27/simple-parallax/

======
spartanatreyu
Instead of using margin, wouldn't translate be better?

The image would still just scroll like normal if translate wasn't supported.
Plus the processing would be moved to the gpu and if the browser doesn't
understand translate then it probably shouldn't be showing parallax pages.
Nothing is worse then a jumpy site.

~~~
dkuntz2
What is translate? From my really quick search it seems to be a canvas method,
and I don't know that much about canvas, but I'm not sure if there's an _easy_
way to implement it that keeps the simplicity of the script.

My main goal was to have a functioning parallax effect that was reasonably
simple.

~~~
spartanatreyu
"Translate" is a part of css3's 2d transforms.

Here's the mdn page: [https://developer.mozilla.org/en-
US/docs/Web/CSS/transform](https://developer.mozilla.org/en-
US/docs/Web/CSS/transform)

There's also a 3d version and if you set the z value to 0, the whole site
looks the same and runs ridiculously better.

here's the performance stats: [http://jsperf.com/translate3d-vs-
xy/28](http://jsperf.com/translate3d-vs-xy/28)

------
bunkat
Pretty nice! Little bit jumpy when scrolling with the mouse wheel though (much
smoother and better effect with the scroll bar), maybe animate the change to
offset?

~~~
dkuntz2
Yeah, I'm not really sure how to fix that. It's really bad on Firefox for
Android.

Making it animate, that's not really easy to do using basic JS. Supposedly I
could have a function call that moves it to the correct position more slowly
using intervals, but that seems kinda hacky to me.

Basically, it works, but it's not amazing (which you pointed out).

