Question:
How can I make the menu bar gradually change from one color to another as the page scrolls?
section {
height: 1000px;
}
section:nth-of-type(even) {
background-color: #ccc;
}
section:nth-of-type(odd) {
background-color: #ddd;
}
#main {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 50px;
background: linear-gradient(to right, white, red);
}<div id="main"></div>
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>Answer:
As an option:
$(document).ready(function(){
$(window).scroll(function(){
let step = 100;
let x = 255;
let y = 0;
let z = 0;
if ($(window).scrollTop() > 0 && $(window).scrollTop() < 255){
x = 0;
y = 0 + $(window).scrollTop();
z = 255;
}else if ($(window).scrollTop() > 255 && $(window).scrollTop() < 510){
x = 0;
y = 255;
z = 255 - $(window).scrollTop() + 255;
} else if ($(window).scrollTop() > 510 && $(window).scrollTop() < 765){
x = 0 + $(window).scrollTop() - 510;
y = 255;
z = 0;
} else if ($(window).scrollTop() > 765 && $(window).scrollTop() < 1120){
x = 255;
y = 255 - $(window).scrollTop() + 765;
z = 0;
} else if ($(window).scrollTop() > 1120 && $(window).scrollTop() < 1375){
x = 0;
y = 255 - $(window).scrollTop();
z = 255;
} else {
x = 0;
y = 0;
z = 255;
}
let param = 'rgb('+x+', '+y+', '+z+')';
$("#main").css('background', param);
});
}); body {
height: 1000px;
}
section {
height: auto;
}
section:nth-of-type(even) {
background-color: #ccc;
}
section:nth-of-type(odd) {
background-color: #ddd;
}
#main {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
background: blue;
}
#boddy{
height: 1000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boddy">
<div id="main"></div>
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
</div>Variant with iridescent gradient:
$(document).ready(function(){
$(window).scroll(function(){
let step = 100;
let x = 255;
let y = 0;
let z = 0;
if ($(window).scrollTop() > 0 && $(window).scrollTop() < 255){
x = 0;
y = 0 + $(window).scrollTop();
z = 255;
}else if ($(window).scrollTop() > 255 && $(window).scrollTop() < 510){
x = 0;
y = 255;
z = 255 - $(window).scrollTop() + 255;
} else if ($(window).scrollTop() > 510 && $(window).scrollTop() < 765){
x = 0 + $(window).scrollTop() - 510;
y = 255;
z = 0;
} else if ($(window).scrollTop() > 765 && $(window).scrollTop() < 1120){
x = 255;
y = 255 - $(window).scrollTop() + 765;
z = 0;
} else if ($(window).scrollTop() > 1120 && $(window).scrollTop() < 1375){
x = 0;
y = 255 - $(window).scrollTop();
z = 255;
} else {
x = 0;
y = 0;
z = 255;
}
let param = 'rgb('+x+', '+y+', '+z+')';
$("#main").css('background', 'linear-gradient(to right, '+param+', red)');
});
}); body {
height: 1000px;
}
section {
height: auto;
}
section:nth-of-type(even) {
background-color: #ccc;
}
section:nth-of-type(odd) {
background-color: #ddd;
}
#main {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
background: blue;
}
#boddy{
height: 1000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boddy">
<div id="main"></div>
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
</div>Option with mouse tracking and gradient change:
$(document).ready(function(){
$(window).mousemove(function(event){
let xz = event.clientX;
let yz = event.clientY;
xz = xz + yz;
let step = 100;
let x = 255;
let y = 0;
let z = 0;
let x1 = 255;
let y1 = 0;
let z1 = 0;
if (xz > 0 && xz < 255){
x = 0;
y = 0 + xz;
z = 255;
} else if (xz > 255 && xz < 510){
x = 0;
y = 255;
z = 255 - xz + 255;
} else if (xz > 510 && xz < 765){
x = 0 + xz - 510;
y = 255;
z = 0;
} else if (xz > 765 && xz < 1020){
x = 255;
y = 255 - xz + 765;
z = 0;
} else if (xz > 1020 && xz < 1275){
x = 255;
y = 0;
z = 0 + xz - 1020;
} else if(xz > 1275 && xz < 1530){
x = 255 - xz +1275;
y = 0;
z = 255;
} else {
x = 0;
y = 0 + xz -1530;
z = 255;
}
if (yz > 0 && yz < 255){
x1 = 0;
y1 = 0 + yz;
z1 = 255;
}else if (yz > 255 && yz < 510){
x1 = 0;
y1 = 255;
z1 = 255 - yz + 255;
} else if (yz > 510 && yz < 765){
x1 = 0 + yz - 510;
y1 = 255;
z1 = 0;
} else if (yz > 765 && yz < 1120){
x1 = 255;
y1 = 255 - yz + 765;
z1 = 0;
} else if (yz > 1120 && yz < 1375){
x1 = 0;
y1 = 255 - yz;
z1 = 255;
} else {
x1 = 0;
y1 = 0;
z1 = 255;
}
let param = 'rgb('+x+', '+y+', '+z+')';
let param1 = 'rgb('+x1+', '+y1+', '+z1+')';
$("#main").css('background', 'linear-gradient(to right, '+param+', '+param1+')');
});
}); body {
height: 1000px;
}
section {
height: auto;
}
section:nth-of-type(even) {
background-color: #ccc;
}
section:nth-of-type(odd) {
background-color: #ddd;
}
#main {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
background: blue;
}
#boddy{
height: 1000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boddy">
<div id="main"></div>
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
</div>Responsive variant of cursor tracking and gradient change.
$(document).ready(function(){
$(window).mousemove(function(event){
let xz = event.clientX;
let yz = event.clientY;
var xwin1 = $(window).width() / 100;
var ywin1 = $(window).height() / 100;
xz = Math.round(xz / xwin1);
yz = Math.round(yz / ywin1);
let zz = Math.abs((xz+yz)/2);
zz = Math.round((zz * 350) / 100);
if (Math.abs(xz-yz) < 25){
yz = Math.abs(100-yz);
}
let param = 'hsl('+zz+', '+xz+'%, '+yz+'%)';
let param1 = 'hsl('+zz+', '+yz+'%, '+xz+'%)';
$("#main").css('background', 'linear-gradient(to right, '+param+', '+param1+')');
});
}); body {
height: 1000px;
}
section {
height: auto;
}
section:nth-of-type(even) {
background-color: #ccc;
}
section:nth-of-type(odd) {
background-color: #ddd;
}
#main {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
}
#boddy{
height: 1000px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="boddy">
<div id="main"></div>
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
</div>