Link footer color to changing background color

Design help Custom code
1

Hello,

I have recently found a code that changes my background color of my website to a new color every 16 seconds. The problem is my Nav Menu stays the same initial color and doesn’t change with the background. Can anyone provide me with a code that links my header/navmenu color to the background color so that they change together??? I can’t find anything on google unfortunately and I know this will require a custom code.

Also on this custom code can anyone also provide me with a code that fades the colors into each other smoothly? Right now when the colors change it just happens instantaenously. I would like them to fade into each other smoothly. Any help would be awesome! Here is the custom code that is changing my background color:

Here is my site Read-Only: Webflow - Vox Studios

3 
<script type="text/javascript">
function setbackground()
{
window.setTimeout( "setbackground()", 16000); // 5000 milliseconds delay
var index = Math.round(Math.random() * 7);
var ColorValue = "ada197"; // default color - lt brown (index = 0)
if(index == 1)
ColorValue = "d2d8cc"; //off white
if(index == 2)
ColorValue = "ff2c34"; //red
if(index == 3)
ColorValue = "83735b"; //brown
if(index == 4)
ColorValue = "ff546e"; //pink
if(index == 5)
 ColorValue = "c7ff64"; //green
if(index == 6)
ColorValue = "ebfcc7"; //lt green
if(index == 7)
ColorValue = "#ffc8ca"; //lt pink
document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
}
</script>
<body onload="setbackground();">
4

Hi @Stephen_Bement,

You could try this:

<script type="text/javascript">
function setbackground()
{
window.setTimeout( "setbackground()", 16000); // 5000 milliseconds delay
var index = Math.round(Math.random() * 7);
var ColorValue = "ada197"; // default color - lt brown (index = 0)
if(index == 1)
ColorValue = "d2d8cc"; //off white
if(index == 2)
ColorValue = "ff2c34"; //red
if(index == 3)
ColorValue = "83735b"; //brown
if(index == 4)
ColorValue = "ff546e"; //pink
if(index == 5)
 ColorValue = "c7ff64"; //green
if(index == 6)
ColorValue = "ebfcc7"; //lt green
if(index == 7)
ColorValue = "#ffc8ca"; //lt pink

document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
document.querySelector(".nav__bg").style.backgroundColor = "#" + ColorValue;

//Transitions
document.getElementsByTagName("body")[0].style.transition = "all 2s";
document.querySelector(".nav__bg").style.transition = "all 2s";
}
</script>
<body onload="setbackground();">

Let me know how you go!

5

Hey Milan!

Firstly thank you very much for responding and trying to help me out with this. Unfortunately the code you wrote didn’t work for me. Neither for the background transition or for making the header stay the same colors as the background. If you have any ideas I would be really grateful!!!

  • Stephen
6

Hi @Stephen_Bement,

Looks like you changed the class name of the nav__bg element, here’s the updated code:

<script type="text/javascript">
function setbackground()
{
window.setTimeout( "setbackground()", 16000); // 5000 milliseconds delay
var index = Math.round(Math.random() * 7);
var ColorValue = "ada197"; // default color - lt brown (index = 0)
if(index == 1)
ColorValue = "d2d8cc"; //off white
if(index == 2)
ColorValue = "ff2c34"; //red
if(index == 3)
ColorValue = "83735b"; //brown
if(index == 4)
ColorValue = "ff546e"; //pink
if(index == 5)
 ColorValue = "c7ff64"; //green
if(index == 6)
ColorValue = "ebfcc7"; //lt green
if(index == 7)
ColorValue = "#ffc8ca"; //lt pink

document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
document.querySelector(".nav-menu-overlay-bg").style.backgroundColor = "#" + ColorValue;

//Transitions
document.getElementsByTagName("body")[0].style.transition = "all 2s";
document.querySelector(".nav-menu-overlay-bg").style.transition = "all 2s";
}
</script>
<body onload="setbackground();">
8

Thank you for this Stan! Would you by any chance know a simple code that will make my header background color always match the background color as it changes? for whatever reason it just stays white. currently I just have it set to transparent. I think the main block is called c-nav-main or w-nav.

10

You’re awesome!!! So the transitions are working perfectly! thank you so much! for the nav menu, you nailed the code but what you had change was the color of the background when the menu opens. Im looking to make the nav menu block when its closed match the color of the background. I think the main block is called c-nav-main or w-nav. I hope I’m making sense. haha.

I will include a photo with the piece of the nav bar I’m talking about selected.

IMG_5503
IMG_55033024×3248 2.11 MB

1 Like
12

Hi @Stephen_Bement,

Transparent background is probably the way to go. If you’re setting it using code you may have an overlap with the lottie animation. You can try this and play around with this code:

<script type="text/javascript">
function setbackground()
{
window.setTimeout( "setbackground()", 16000); // 5000 milliseconds delay
var index = Math.round(Math.random() * 7);
var ColorValue = "ada197"; // default color - lt brown (index = 0)
if(index == 1)
ColorValue = "d2d8cc"; //off white
if(index == 2)
ColorValue = "ff2c34"; //red
if(index == 3)
ColorValue = "83735b"; //brown
if(index == 4)
ColorValue = "ff546e"; //pink
if(index == 5)
 ColorValue = "c7ff64"; //green
if(index == 6)
ColorValue = "ebfcc7"; //lt green
if(index == 7)
ColorValue = "#ffc8ca"; //lt pink

document.getElementsByTagName("body")[0].style.backgroundColor = "#" + ColorValue;
document.querySelector(".c-nav-main").style.backgroundColor = "#" + ColorValue;


//Transitions
document.getElementsByTagName("body")[0].style.transition = "all 2s";
document.querySelector(".c-nav-main").style.transition = "all 2s";
}
</script>
<body onload="setbackground();">
13

Hey Milan!

Firstly thank you very much for responding and trying to help me out with this. Unfortunately the code you wrote didn’t work for me. Neither for the background transition or for making the header stay the same colors as the background. If you have any ideas I would be really grateful!!!

  • Stephen