Scroll to change background-color (jquery)

Changes the background-color over a scroll distance; built with jQuery color plugin. https://github.com/jquery/jquery-color This was in response to a twitter status ( https://twitter.com/alexwmccabe/status/270650199930724352 )

by Alex Alexandrov

HTML

<script src="http://code.jquery.com/color/jquery.color-2.1.0.js"></script>
<body>
    <section>Section 1</section>
    <section>Section 2</section>
    <section>Section 3</section>
    <section>Section 4</section>
    <section>Section 5</section>
</body>

CSS

body {
    background-color: rgb(210,50,98);
    min-height: 2000px;
}
section{
	min-height: 350px;
    height: 70vh;
}

JavaScript

var sections = [];
var sectionsYStart = [];
var activeSection = 0;

var pageInit = function(){
    sections = [];
    sectionsYStart = [];
    $("section").each(function(i,v){
        sections[i] = v;
        sectionsYStart[i] = $(v).offset().top;
    });
};

var ChangeColorOnScroll = function(){
    var scroll = $(window).scrollTop();
    scrollColors(scroll, $("body"), ["#FF006B", "#36DBFF", "#8000D2", "#00FFA7", "rgba(0,0,0,0)"]);
}

var scrollColors = function(scroll, el, colors){
    // which of all the sections, are we in between?
    var z = 0, seclen = sections.length;
    for(var i = 0; i < seclen; i ++){
        if (scroll > sectionsYStart[i]){
            z = i;
        }
    }
    activeSection = z;

    scroll_pos = scroll;
    var animation_begin_pos = sectionsYStart[z]; //where you want the animation to begin
    var animation_end_pos = sectionsYStart[z+1]; //where you want the animation to stop
    var beginning_color = $.Color(colors[z]);
    var ending_color = $.Color(colors[z+1]);

    if(scroll_pos >= animation_begin_pos && scroll_pos <= animation_end_pos ){
        var percentScrolled = scroll_pos / ( animation_end_pos - animation_begin_pos );
        if(percentScrolled>1){ percentScrolled = percentScrolled - z; }
        var newRed = beginning_color.red() + ( ( ending_color.red() - beginning_color.red() ) * percentScrolled );
        var newGreen = beginning_color.green() + ( ( ending_color.green() - beginning_color.green() ) * percentScrolled );
        var newBlue = beginning_color.blue() + ( ( ending_color.blue() - beginning_color.blue() ) * percentScrolled );
        
        var newAlpha = beginning_color.alpha() + ( ( ending_color.alpha() - beginning_color.alpha() ) * percentScrolled );

        var newColor = new $.Color( newRed, newGreen, newBlue, newAlpha );
        el.animate({ backgroundColor: newColor }, 0);
    } else if ( scroll_pos > animation_end_pos ) {
         el.animate({ backgroundColor: ending_color }, 0);
    } else if...