parallaxing background images

Quick background

My website http://robt.info/ has background images that change as you scroll.

I am using this jQuery:

<script>
jQuery(window).scroll(function(){
    var fromTopPx = 300; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();
    if(scrolledFromtop > fromTopPx){
        jQuery('html').addClass('scrolled');
    }else{
        jQuery('html').removeClass('scrolled');
    }
});</script>

Code (markup):

combined with this CSS (so both the images load before scroll):

html {
    background-image:url(http://robt.info/wp-content/uploads/2013/09/funny-kids-comic-animals_3.jpg),url(http://robt.info/wp-content/uploads/2013/09/funny-kids-comic-animals_41.jpg);
    background-repeat: no-repeat;
}

html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/09/funny-kids-comic-animals_41.jpg);
}

Code (markup):

My question

If I wanted to add another image (third image) that triggers from a certain distance from the top of the page, what would be the best way to go about making this happen???

Much thanks in advance for any help you can offer!

 

Though I do not know JS, and I am a big ZERO in case of JS,
Though you can get your desired result this way (atleast I hope so).

<script>
jQuery(window).scroll(function(){
    var fromTopPx = 300; // distance to trigger
    var scrolledFromtop = jQuery(window).scrollTop();

    var fromTopPx2 = 600; // distance to trigger

    if(scrolledFromtop > fromTopPx && scrolledFromtop < fromTopPx2){
        jQuery('html').addClass('scrolled');
    }
    else if(scrolledFromtop > fromTopPx2){
        jQuery('html').addClass('scrolled2');
    }
    else{
        jQuery('html').removeClass('scrolled');
    }
});</script>

Code (markup):

CSS

html {
    background-image:url(http://robt.info/wp-content/uploads/2013/09/funny-kids-comic-animals_3.jpg),url(http://robt.info/wp-content/uploads/2013/09/funny-kids-comic-animals_41.jpg);
    background-repeat: no-repeat;
}
html.scrolled {
background-image:url(http://robt.info/wp-content/uploads/2013/09/funny-kids-comic-animals_41.jpg);
}

html.scrolled2 {
background-image:url(http://robt.info/wp-content/uploads/2013/09/funny-kids-comic-animals_insert no.jpg);
}

Code (markup):

Let me know if it works...

 

Maybe, create a class in Java, called "layer", inside the class you will need a variable to hold the elements id, "scrolled" etc, also another variable called "Z", this is the distance away from the user, then, vary their scroll rates based on the size of the "Z" value.

In the class constructor function, allow the function to take the element ID, and created three objects, one for each layer.

Then, in your scroll hook function, loop through the objects, check each "Z" value of each, and reduce the amount of scroll on each layer based on the size of the "Z" value.

I can give some code examples if you're stuck with this.

Cheers.

P.S. there are scripts out there you can download that will do this for if you are not trying to learn how to do it yourself.

 

i fussed around with jsfiddle to no avails... dammit brain!