Streaming live at 10am (PST)

Full frame color border / transition


#1

Hey guys,

I’ve been trying to emulate this website: https://www.designbetter.co/

Specifically the transition color change with the blue border. So far, I’ve been able to do that by having a div occupy the full screen and adding a border to that but then I lose interaction on everything below that div.

Is there any suggestion on what structure to use to attain this effect without losing interaction on the objects below?

Thanks in advance for any help!


Here is my public share link: https://preview.webflow.com/preview/jules-m-bf74fdaba4fc89564b89ca6dd5a11ec?preview=64949b06bbfffa8817e8f1ee57c57cfb


#2

What the reference site to is styling the body to give it left and right borders with colours. Then for the top and bottom borders, there are two divs with 100% width, fixed position on the top and bottom of the page respectively.

But since webflow interaction doesn’t let you change border colour, you can add the left-right borders with divs as well (same concept with the top and bottom borders). So you have to control the colour of all 4 divs on scrolling using the interaction function. It’s kind of messy but it works!:smiley:


#3

Awesome, I’ll try it out today. I was thinking about doing the multiple divs as well but was wondering if there was an easier solution.

Thank you. :grinning:


#4

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