Scroll Interaction colour overlay fade

Design help Animations & Interactions
#1

Hi,

I am looking to create a similar scroll interaction as seen in this site http://jerom.webflow.io/

The interaction where the image goes from having a dark colour overlay that fades away when scrolling. Then the coloured box fades in.

I know how to do the interaction however does anyone have any advice on what the DIV set up would be?

Many Thanks

Scott

Here is my public share link: LINK
(how to access public share link)

#2

Hi Scott,

Looks fairly simple as far as DIVs go.

The way I’d do it is have a SECTION div to hold your background image. Next up a CONTAINER div to centre your main content within that SECTION.

Then inside the CONTAINER div you would have another DIV to hold the coloured box that fades in. Align the box how you want it. Add your interactions to the SECTION so that the background image fades on scroll and then an interaction to show the coloured box and you should hopefully be set.

Hope that helps a bit.

Best wishes,

Mark

#3

HI Mark,

Thanks for your reply, yeah I worked it out. I just didn’t have one of the DIVs set to absolute, thats why it wasn’t working correctly.

Cheers

Scott

#4

Ah excellent. Glad you have it all working.

Good luck with your site.

Best wishes,

Mark

#5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.