Background colour changes doable in WF? (see example sites)

Hi all,

Stumbled across a digital agency’s new website today (some of you may of heard of them, ustwo in the UK) and loved loved this feature they’ve used in the background. www.ustwo.com

As you scroll, the background colour changes, it’s a great effect and I wondered if anyone knew if it could be replicated in Webflow?

Another site which has used a similar detail is this The Third Wave | 2019 Core77 Conference - Core77 but I think their’s isn’t as subtle as ustwo’s and doesn’t work as well… It looks like this site uses one massive div (I think?) with a multicolour gradient running diagonally across it, so as use scroll down you get the colour change effect.

Anyway your thoughts greatly appreciated, and I’ve noticed this feature cropping up elsewhere on the web, bit of a UX trend methinks!

Ta,
Jamie

Hey @jamiesamman992

I had done this on a project previously and you can see an example i’ve just published for you and anyone else interested in the same technique. It’s cloneable also so you can use for your own projects.

https://webflow.com/website/Background-Fader-Example

It uses transitions (Scroll Trigger) and absolute positioning for background colours on 4 Divs. Hope this helps, let me know if you need anymore help! :smile:

3 Likes

Hey Jamie

Yeah its definitely possible - from what i’ve been looking at online you’ll need to know a little jQuery to get it to work.

Here’s a good code pen to start with:

1 Like

Amazing! Top top job, that works really smoothly and I’ll definitely use it in the future, thanks so much for making it available to use. You legend :slight_smile:

It will be really useful to use this as a base for when (hopefully it should be soon!) WF introduces active scrolling. That’s what I loved about the ustwo site, how the colour is geared to your scroll.

Thanks again @tim

Cheers for the tip Evan! I’m not very clued up on jQuery, have been putting off learning it but I should really take the plunge soon haha.

I clicked on a link in that codepen you sent though and it took me to this http://flatuicolors.com/

Absolutely brilliant resource! That will be getting used for sure!

Ta,
Jamie

haha sorry - i had one too many tabs open when I was posting links!

FYI - Techstream also wrote a nice article of the subject which includes downloadable files to play with: Change Page Background on Scroll

nice one tim!

Just created my own functional verison based on the Techstream article (using data attributes) but your version looks a bit more elegant :smile:

1 Like

Your more than welcome @jamiesamman992 and @EvanJones. It’s a happy month :smiley: an update is coming soon!!!

1 Like

yesssss - really looking forward to checking out the updates :smile:

1 Like

https://webflow.com/website/Background-Fader-Example

For anyone interested I have made the transitions even smoother! You could do quite a few amazing things with this mechanism.

Hey! This is awesome – thanks so much for sharing. I am kind of a newbie, but I was wondering, is there any easy way to transfer this to my site? Where would you suggest starting? Thanks in advance for any help!!

Wow that’s fabulous. Thanks so much for sharing! I need to keep a cheat sheet of all these cool tricks I’m learning from you guys.

Hi @tim, I tried to replicate your fader example but couldn’t see which elements you applied your Fade 1, Fade 2, and Fade 3 interactions to.

Looking at all the elements you have, none of them seem to have those interactions checked. How is this possible?

Thanks!

@dyw999 sorry for late response!

So every fruit image apart from the first one has a Scroll interaction assigned to it. The Main menu also responds to the nearest ID of the sections giving it that darker background. Let me know if you need more help and i’ll ping you my Skype!

Thanks jamiesamman for sharing the website link. It’s some thing new about which I came across. And I also appreciate the implementation shared by other Forum Members.Gonna really try this technique. Hope this works for blog section.