9

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).

6 Answers 6

27

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

6
  • When i try this i get some strange rows at the button of the page? (dark grey and some lighter grey)
    – Maanstraat
    Jan 6, 2012 at 10:50
  • I can't seem to reproduce that on a blank page, I'll edit in a link to a fiddle demo.
    – Guy Cook
    Jan 6, 2012 at 10:58
  • Great code! How could I change the color? Now it's from dark grey to light grey. What if I want to change it from yellow to white? Feb 15, 2012 at 10:24
  • @TonyBolero If you're still looking for this I've updated the answer with a more generic version - just plug in your start and end colours and y-positions and it should be good
    – Guy Cook
    Mar 9, 2012 at 13:42
  • Great answer. I extended it and added opacity and fixed a bug. See jsFiddle: jsfiddle.net/cek0rrow/1 Dec 2, 2014 at 21:56
25

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');
                }
            });
        });
5
  • Thnx you! Perfect :) and how can i do it animated? just change the css to .animate({"background":"#F00"},500)?
    – Maanstraat
    Jan 6, 2012 at 10:37
  • 2
    just changing the css to .animate() will not work for background color. jQuery probably doesn't support animating the background color. You will have to take help of jquery UI or some plugin. Refer this question: stackoverflow.com/questions/190560/…
    – Ghost-Man
    Jan 6, 2012 at 10:43
  • thx diEcho. and I second what @iTypist said, you need a plugin for a color animation to work Jan 6, 2012 at 10:48
  • That plugin will not work for RGBA (which Maanstraat is asking). You need this modified version pioupioum.fr/sandbox/jquery-color Jan 6, 2012 at 11:28
  • @redmoon7777 Does this mean that for every pixel you scroll, the style will be updated ? Or can jQuery detect that it doesn't need to when the old and new values are the same ? I know modern browser on modern computer can handle this quite easily, but I'm curious : ). Mar 1, 2015 at 23:44
3

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/

2

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

0

With animation

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<!--for RGBA support. http://pioupioum.fr/sandbox/jquery-color/ -->
<script type="text/javascript" src="https://raw.github.com/piouPiouM/jquery-color/master/jquery.color.js"></script> 
<!--the magic -->
<script type="text/javascript">
$(document).ready(function(){
    $(document).scroll(function(){
        if($(this).scrollTop() > 210)
            $('#bk').animate({backgroundColor: 'rgba(255,255,255,.9)'}, 1000);
    });
});
</script>
</head>
<body style="background: black">
<div id="bk" style="background-color: rgba(255,255,255,.5); height: 200%; min-height: 400px">
<!--change this element's background transparency instead of body so that you will see the effect -->
</div>
</body>
</html>
1
  • This works but when you are going down but go back up the color will not change back...
    – Maanstraat
    Jan 6, 2012 at 10:48
0

Here is an answer that is adapted from a W3 tutorial, the javascript.

 window.onscroll = function() {scrollFunction()};

function scrollFunction() {
if (document.body.scrollTop > 420 || document.documentElement.scrollTop > 420) {
document.getElementById("navigationBar").style.background = "#2E5894";

} else {
   document.getElementById("navigationBar").style.background = "transparent";

}
}

This changes a specific id, for me my navigation bar. For easy transitions, add this to your css, under the navigationBar "id" in this case (alongside other specifications youd like).

 #navigationBar{
/*my header bar, no need to follow this*/
overflow: hidden;
color: white;*/
width:100%;
position: fixed;
-webkit-transition: all ease-out .5s;
-moz-transition: all ease-out .5s;
-o-transition: all ease-out .5s;
 transition: all ease-out .5s;
 }

This will give you a bar that changes color gradually after 420 pixels.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.