Change body's background-color on scroll

Question

I'm trying to achieve this result, you can see it used brilliantly here http://www.formuswithlove.se

I want the body background to change when I reach a specific div called #about.

Can you please help me?

Thanks so much, F.

Answer 1

you could do it based on the scroll offset without any jQuery plugins

$(window).scroll(function(){
    if($(window).scrollTop()>500){
        $('body').addClass('redBg')
    }else{
        $('body').removeClass('redBg')
    }
})

or use something like jQuery.inview

$("#someElement").bind('inview', function(e, isInView) {
   if(isInView){
     $('body').addClass('redBg')
   }else{
      $('body').removeClass('redBg')
   }
});

Answer 2

Here is a basic example to get you started. It is tested in Firefox, Chrome, and IE 9 & 10 - not tested in Safari though.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{
    margin:0;
    padding:0;
    background:white;
}
div{
    width:100%;
    height:1600px;
}
</style>
<script type="text/javascript">
var section = {
    sections: [
        'section1',
        'section2',
        'section3'
    ],

    sectionOffset: {},

    sectionBackground: {
        'section1': 'rgb(0, 0, 0)',
        'section2': 'rgb(132, 132, 132)',
        'section3': 'rgb(255, 255, 255)'
    },

    currentSection: null
}

window.onload = function()
{
    var looplen = section.sections.length;

    for(var i = 0; i < looplen; ++i)
    {
        section.sectionOffset[section.sections[i]] = document.getElementById(section.sections[i]).offsetTop;
    }

    setTimeout("initialBackgroundChange()", 50);
}

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

function tryBackgroundChange()
{
    var looplen = section.sections.length,
        match,
        backgroundColor;

    for(var i = 0; i < looplen; ++i)
    {
        if(pageYOffset >= section.sectionOffset[section.sections[i]])
        {
            match = section.sections[i];
        }
    }

    if(match != section.currentSection)
    {
        section.currentSection = match;
        changeBackground();
    }
}

function changeBackground()
{
    var cbc, // Current background-color
        tbc, // Target backgrounc-color
        ri,  // Red incrementation
        gi,  // Green incrementation
        bi,  // Blue incrementation
        rgb, // Temporary color from cbc to tbc
        smoothness = 20; // Higher is smoother

    cbc = getStyle(document.body, 'background-color');
    cbc = cbc.substr(4, cbc.length-5);
    cbc = cbc.split(", ");

    tbc = section.sectionBackground[section.currentSection];
    tbc = tbc.substr(4, tbc.length-5);
    tbc = tbc.split(", ");

    ri = (tbc[0] - cbc[0]) / smoothness;
    gi = (tbc[1] - cbc[1]) / smoothness;
    bi = (tbc[2] - cbc[2]) / smoothness;

    for(var i = 1; i <= smoothness; ++i)
    {
        rgb = [
            Math.ceil(parseInt(cbc[0]) + (ri * i)),
            Math.ceil(parseInt(cbc[1]) + (gi * i)),
            Math.ceil(parseInt(cbc[2]) + (bi * i))
        ];

        setTimeout("document.body.style.backgroundColor = 'rgb(" + rgb.join(",") + ")'", i * (240/smoothness));
    }
}

function initialBackgroundChange()
{
    if(pageYOffset == 0)
    tryBackgroundChange();
}

function getStyle(elem, name)
{
    if (document.defaultView && document.defaultView.getComputedStyle)
    {
        name = name.replace(/([A-Z])/g, "-$1");
        name = name.toLowerCase();
        s = document.defaultView.getComputedStyle(elem, "");
        return s && s.getPropertyValue(name);
    }

    else if (elem.currentStyle)
    {
        if (/backgroundcolor/i.test(name))
        {
            return (function (el)
            { // get a rgb based color on IE
                var oRG=document.body.createTextRange();

                oRG.moveToElementText(el);

                var iClr=oRG.queryCommandValue("BackColor");

                return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+
                        ((iClr & 0xFF0000)>>16)+")";
            })(elem);
        }

        return elem.currentStyle[name];
    }

    else if (elem.style[name])
    {
        return elem.style[name];
    }

    else
    {
        return null;
    }
}

</script>
</head>

<body>

<div id="section1"></div>

<div id="section2"></div>

<div id="section3"></div>

</body>
</html>

Change body's background-color on scroll

Question

2 answers

solution1
2 2013-03-15 18:34:56

solution2
0 2013-03-15 21:20:48

Change body's background-color on scroll

Question

2 answers

solution1 2 2013-03-15 18:34:56

solution2 0 2013-03-15 21:20:48

solution1
2 2013-03-15 18:34:56

solution2
0 2013-03-15 21:20:48