Help with Parallax Effect

Problem: When scrolling, the background image is jumpy and not smooth.

CodePen: https://codepen.io/marc-os/full/xNVNVz

I think you’ve done well unless your trying to provide a totally static image!!! :vulcan_salute:

Parallax scrolling is a special scrolling technique used in web design where background images throughout a web page move slower than foreground images, creating an illusion of depth on a two-dimensional site.

1 Like

What browser are you seeing the jumpiness on? It looks fine to me in Chrome and Firefox. You can look at other solutions using transform and pure CSS.

Hi lasjorg!

Both were super jumpy…weird thing is that, now that I went to get a GIF of it, it’s not doing it.

Thanks for the link, every time I searched, I got the fixed image “parallax” which is not really parallax. However, this article is legit: https://www.okgrow.com/posts/css-only-parallax

Thanks for looking into it!

Browser performance is sometimes odd. If you do want to use the JS solution another thing to look at is throttling the scroll, or using requestAnimationFrame.

:point_up_2: good stuff!

Thanks again!