5 ms·
Show HN: Simple JavaScript Parallax effect
- bunkat 13y agoPretty 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 13y agoYeah, 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).
- spartanatreyu 13y agoInstead 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 13y agoWhat 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 13y ago"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