Scrolling Text Over Image

Site URL: https://lonesprucetestsite.squarespace.com/config/pages

Not sure if what I'm asking is possible, but...here goes nothing. 

I'm looking to have a darker overlay with lighter text move up over the background image as the user begins to scroll. This would ultimately cover the entire background image with an overlay and allow the user to read the text in full, then continue scrolling to move down the page and to the gallery below. 

The idea being that for this "projects" section we will need short descriptions of the work to follow and we'd like to keep the scroll navigation rather than having a button and Lightbox pop-up with text. 

Possible?

On 8/4/2021 at 9:19 PM, LoneSpruce said:

Site URL: https://lonesprucetestsite.squarespace.com/config/pages

Not sure if what I'm asking is possible, but...here goes nothing. 

I'm looking to have a darker overlay with lighter text move up over the background image as the user begins to scroll. This would ultimately cover the entire background image with an overlay and allow the user to read the text in full, then continue scrolling to move down the page and to the gallery below. 

The idea being that for this "projects" section we will need short descriptions of the work to follow and we'd like to keep the scroll navigation rather than having a button and Lightbox pop-up with text. 

Possible?

You can try to use scrolltrigger to achieve that, the example show with text but it can be turned to background if you can twist it

How to fade in and fade out in ScrollTrigger? - GSAP - GreenSock