Sticky and unsticky background of row

Hi everyone! I need some help with what I think will end up being custom css. I really want to have a row on my site have a semi-sticky position. That is to say: when the user scrolls the background image fills the whole screen and sticks, the text scrolls up and past it, and only after the user has finished scrolling past all the text does the background image unstick. Here is an example of that effect (the “get a fresh look” section): https://www.metmuseum.org/primer/in-praise-of-painting#information-card

I’ve been researching for hours and can’t seem to find the right solution. Any advice would be extremely appreciated. I’m teaching myself website design and development and can use all the guidance I can get!

Hi colemi,

Check out scrollmagic: https://scrollmagic.io/

This demo in particular: Section Wipes (natural) - Examples - ScrollMagic.