Change image on scroll

On my website is a fixed image. This image should be “animated”, meaning that the single frames of the animation should be iterated. So the idea is to have an array of images and that every time the user scrolls, the array is iterated and the displayed image changes, thus creating an animation. I’m not that accustomed to using JS, thus I don’t really know where to start. The only thing I have is the CSS:

#animation { 
background-repeat: no-repeat;
position : fixed; 
width: 980px;
margin: 0 auto;
}

Answer

Ok, I’ve created example for fixed number of images that will be used in “movie/animation”. In this case, the number is 5. Script will get image of site’s height and whole animation (5 frames) will have lenght of site’s lenght. I’ve preloaded and hide images that will be used in animation just to make sure that animation will work smooth.

HTML

<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg"/>
<img class="hidden" src="http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg"/>

<!-- Next image is used for first frame, before scroll -->
<img src="http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg" id="animation" />

<div id="bottommark"></div>

CSS

.hidden {
    position: absolute;
    top: -9999999px;
}

#bottommark {
    position: absolute;
    bottom: 0;
}

#animation { 
    background-repeat: no-repeat;
    position : fixed; 
    top: 0;
    width: 980px;
    margin: 0 auto;
}

body, html {
    height: 1000px; /* just for DEMO */
    margin: 0;
}

jQuery

$(document).ready(function(){
    var offset2 = $(document).height();
   var lineHF = offset2 - $("#bottommark").position().top;
    $(window).scroll(function(){
        var offset1 = $(document).height();
        var offset = $(window).scrollTop();
        var lineH = offset1 - $("#bottommark").position().top - offset;
        var lineHpart = lineHF/5; //just in case animation have 5 frames/images

        //below is code in case that animation have 5 frames.
        //If number of frames is different, edit code (add/remove if loops) 

        $("span").html(lineH);
            if (lineH > lineHpart*4) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful1.jpg");
            }
            if ((lineH < lineHpart*4) && (lineH > lineHpart*3)) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful2.jpg");
            }
            if ((lineH < lineHpart*3) && (lineH > lineHpart*2)) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful3.jpg");
            }
            if (lineH < lineHpart*2 && lineH > lineHpart*1) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful4.jpg");
            }
            if (lineH < lineHpart) {
                $("#animation").attr("src", "http://coverjunction.s3.amazonaws.com/manual/low/colorful5.jpg");
            }
        });
    });

DEMO