How can I do this image effect?

1

Hi,

Can someone link me a codepen or a tutorial video which tells me how I can do this image effect where when the user scrolls down the image scrolls down. Example is one the first section of this website https://jameslave.com

Thanks!

2

I am on my phone right now so I can’t really give you a few links but if you Google for a parallax effect, you should find what you are looking for.

3

Thanks for the free publicity! :blush: I did that by using background-attachment: fixed on those divs.

However, as I later found out, that effect is widely dependent on browser because it’s expensive to render. On mobile Chrome and Safari, for example, it doesn’t work; the background scrolls with the page as usual. But it works as intended on mobile Firefox. So a majority of the people reading this post won’t see the effect you mention. A hard lesson in UX design!

Apparently there are some workarounds, so I’ll be trying those soon.

1 Like