Creating a Navigation fades to different colors when scrolling to element

Question

I am creating a single page website with a fixed navigation. There are 4 different sections. When the user clicks the link in the navigation, I would like to fade the color of the navigation to match the theme of the section it takes them to. What would be the best way to go about doing this? I've tried many different things, but nothing seems to achieve the look I am going for. -Thanks in advance!

Answer 1

So you will need a couple of things to accomplish this.

• Nav layer sitting above other layers
• stacked background layers for each section with static background colors
• knowledge of current color and new section color

And what you will do with that is to have each section keep track of its color. When the nav for that section is selected, the current layer behind the nav begins to fade out. At the same time, the layer of the new section begins to fade in. This will give the impression of one color fading into another.

---

edit

jsFiddle Demo

Here is a very rudimentary example of doing this. There should probably be more structure, better styling, and perhaps more management of state in code. However, clicking the links will demonstrate the color fading.

• js

$("#redSection,#redPane").show();
$("#navLinks div").click(function(){
 $(".pane:visible,.section:visible").fadeOut("slow");
 var color = this.getAttribute("data-color");
 $("#"+color+"Section,#"+color+"Pane").stop().fadeIn("slow");
});

• html

<div id="layers">
 <div id="navLinks">
  <div data-color="red">about</div>
  <div data-color="green">contact</div>
  <div data-color="blue">overview</div>
  <div data-color="orange">links</div>
 </div>
 <div id="redPane" class="pane"></div>
 <div id="greenPane" class="pane"></div>
 <div id="bluePane" class="pane"></div>
 <div id="orangePane" class="pane"></div>
</div>
<hr />
<div id="contentArea">
 <div id="redSection" class="section">about</div>
 <div id="greenSection" class="section">contact</div>
 <div id="blueSection" class="section">overview</div>
 <div id="orangeSection" class="section">links</div>
</div> 

• css

#layers{
 position:relative;
}
#navLinks div{
 font-weight:bold;
 font-size:110%;
 text-decoration:underline;
 cursor:pointer;
 position:relative;
 z-index:1;
}
.section{
 display:none;
 height:100px;
 width:100px;
 position:absolute;
}
#redSection{
 background-color:red;
}
#greenSection{
 background-color:green;
}
#blueSection{
 background-color:blue;
}
#orangeSection{
 background-color:orange;
}
.pane{
 position:absolute;
 right:0;
 left:0;
 top:0;
 bottom:0;
 display:none;
}
#redPane{
 background-color:red;
}
#greenPane{
 background-color:green;
}
#bluePane{
 background-color:blue;
}
#orangePane{
 background-color:orange;
}
#contentArea{
 position:relative;
}