Streaming live at 10am (PST)

Scrolling bg change interaction help

#1

Hi guys

The background colour of my hero section is currently a dark grey, however I want to try adding a bg image behind the dark grey and create a scrolling interaction where the opacity of the dark grey reduces to 0 and the bg image below is revealed. I only want the scroll to move down to the next section after the bg image has been made fully visible though.

I’ve tried many tutorials but none seem to show exactly what I’m looking to do. Maybe you can help me once again, @PiterDimitrov? (I’m learning a lot from you) :rofl:

Reece

Here is my public share link:
https://preview.webflow.com/preview/argun-dc?utm_source=argun-dc&preview=4b811f3d42dfc58fe10d793f54bd9f30

#2

Just so I understand what you’re trying to achieve, do you want to have a scrolling effect but no objects on the page actually move up/down?

If this is right, you’ll still need to create that extra “scrolling” space below with a blank div set to specific height (pixels, vh units) and your interactive and page elements will be set to “fixed”.

Right now I’m not seeing your background image or the scroll interaction so not sure. My guess is that you want the solid color to transform into the image. If this is right, I’d layer the background image using z-index and then set the scroll interaction to transform the color div from 100% opacity to 0% opacity

edit: sorry, I reread your post again and I think I know what you’re saying. You should be able to achieve (without extra coding) by using a “blank” div as the trigger element for the fade-out. And then I would use a scrolling (non-fixed) div for the next section on a higher z-index that scrolls over your fixed elements. Not unlike what I’m doing on the top section of this site:
https://828design2.webflow.io/

#3

Hey @Port_of_Folio thanks for replying.

I’ve had a look for some examples and this website (https://www.reine-lungau.at/) is essentially the same as what I’m trying to achieve. So with one scroll/swipe of the mouse pad, the bg image changes to day light but doesn’t move down the page, and on the second scroll it moves down to the second section (which I’ve not yet created in my own project).

Also, I’ve given the ‘bg’ image a z index of -1 which I think is why you probably can’t see it?

Reece

Here is my public share link:
https://preview.webflow.com/preview/argun-dc?utm_source=argun-dc&preview=4b811f3d42dfc58fe10d793f54bd9f30

#4

Yep that site is doing essentially what I’ve described.

Here a simple test to show setup:
https://preview.webflow.com/preview/scrolltest-66cfff?utm_source=scrolltest-66cfff&preview=a20712711295cfade266be80752bbbed

https://scrolltest-66cfff.webflow.io/

1 Like
#5

Thanks @Port_of_Folio :+1:

1 Like
#6

Hey @Port_of_Folio

Do you know how to get the text links etc. to move upwards out of view after the background animation has happened?

https://preview.webflow.com/preview/argun-dc?utm_source=argun-dc&preview=e98f7ab916e25a2217c0b7f4ff1fe5eb

#7

I believe the proper way to do it is by using a “sticky” property but it’s a new feature I haven’t used yet. You can learn more here: https://webflow.com/feature/position-sticky

I did a quick interaction version on my sample page though if you want to check it out. Basically all I’ve done is create and fixed overlay for the nav, and then applied a scroll interaction on the div called “regular old content”. I’m telling the Nav to move up as the “regular old content div” moves up into the viewport.

https://scrolltest-66cfff.webflow.io/

1 Like
#8

Thanks for creating that scroll test - that’s actually almost perfect for me, how would I make the green reach 0% opacity quicker though? Like almost immediately actually.

#9

You can control how quickly it reaches 0% opacity by changing the endpoint of the scroll interaction. Check out the screen grab.

I moved it from ending the transition when 100% of the trigger element is visible in the viewport to 80% in viewport. You can set it to 50% for quicker, etc…

edit: You can also change the height of the trigger element. I had the trigger element height set to 100vh. Changed it to 50vh. Makes the color fade out quicker AND makes your menu fly out quicker. I just republished it if you care to see the new speed.

1 Like
#10

Thanks @Port_of_Folio I get it now

#11

Edit: Nevermind - just figured it out :slight_smile:

@Port_of_Folio my links are not moving upwards when the content div moves into the viewport and I cant work out why because from the looks of it I have made everything the same as how you have in your example. Confused. Mind taking a look?

https://preview.webflow.com/preview/argun-dc?utm_source=argun-dc&preview=14bf5c4835117caf9b4f23979338bd42