Show HN: Simple JavaScript Parallax effect

dkuntz2.com

2 points·dkuntz2··5 comments

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.

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.

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

Here's the mdn page: 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

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?

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

Reply on news.ycombinator.com