Jump to content

Scrolling Text Over Image

Recommended Posts

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?

Link to comment
  • Replies 1
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.