jquery change background color user scroll
Is it possible with jquery that when a user scrolls down the page that the background animate from 50% white to 90% white or someting?
So first it is the color rgba(255,255,255,.5)
and when a user scroll 210px below the color become rgba(255,255,255,.9)
.
Updated, more generic version:
var tStart = 100 // Start transition 100px from top
, tEnd = 500 // End at 500px
, cStart = [250, 195, 56] // Gold
, cEnd = [179, 217, 112] // Lime
, cDiff = [cEnd[0] - cStart[0], cEnd[1] - cStart[1], cEnd[2] - cStart[2]];
$(document).ready(function(){
$(document).scroll(function() {
var p = ($(this).scrollTop() - tStart) / (tEnd - tStart); // % of transition
p = Math.min(1, Math.max(0, p)); // Clamp to [0, 1]
var cBg = [Math.round(cStart[0] + cDiff[0] * p), Math.round(cStart[1] + cDiff[1] * p), Math.round(cStart[2] + cDiff[2] * p)];
$("body").css('background-color', 'rgb(' + cBg.join(',') +')');
});
});
In action
If you want a smooth, gradiated change when scrolling you should try
$(document).ready(function(){
$(document).scroll(function() {
var alpha = Math.min(0.5 + 0.4 * $(this).scrollTop() / 210, 0.9);
var channel = Math.round(alpha * 255);
$("body").css('background-color', 'rgb(' + channel + ',' + channel + ',' + channel + ')');
});
});
JSFiddle
here you go (this will change the page color to blue when you scroll more than 210px, and will revert back to red if you go back up):
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("body").css('background-color', 'blue');
} else {
$("body").css('background-color', 'red');
}
});
});
For smooth transition effect you should check scroll position, accordingly you can change bg-color. use .animate function of jquery.
I found the perfect what I was looking for here
http://jsfiddle.net/cgspicer/V4qh9/
with help of @redmoon7777
css
body{ height:5000px; }
.fifty { background:rgba(25,20,25,.5) }
.ninty { background:rgba(25,20,25,.9) }
jQuery
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$("body").removeClass().addClass('ninty');
} else {
$("body").removeClass('ninty').addClass('fifty');
}
});
});
DEMO