$(document).ready(function(){

    // multiplier determines the 'depth' of the parallax effect.

    var multiplier = .06;



    // use the browser window height to determine our 'viewpoint'

    var browserHeight = $(window).height();

    $(window).resize(function() {

        browserHeight = $(window).height();

    });



    // measure the contents of each scroll_para div and assign it a height

    $('.scroll_para').each(function() {

        

        // zIndex determines which "plane" each multilayered object will start from

        var zIndex = -6;

        

        // set height of .scroll_para to match its contents, if not set already.

        if ( $(this).css("height") != "auto") {

             $(this).css("height" , $(this).contents().height() + "px" );

        };

        

        var scrollDiv = $(this);

        $('img, div', this).each(function() {

            

            var imageLayer = $(this);



            // Each multilayered object must be positioned absolutely

            imageLayer.css("position", "absolute");

    

            // initialize variables

            var itemHeight = scrollDiv.height();

            var itemPos = $(this).offset().top + itemHeight/2;

            var curScroll = $(window).scrollTop() ;



            var scrollPos = (itemPos) - (curScroll + (browserHeight/2)) ;



            // If the z-index of an object is already given, we use that to determine its

            //plane instead assigning automatically. Good for one-off instances, like this block of code.

            if( $(this).css("z-index") == "auto" ) {

                $(this).css( 'z-index' , zIndex );

                zIndex++;

            };



            // assign a "top" property to each plane

            $(this).css('top' , $(this).css("z-index") * scrollPos * multiplier );



            // re-assign this top property on each scroll

            $(window).scroll(function() {

                curScroll = $(window).scrollTop() ;

                scrollPos = (itemPos) - (curScroll + (browserHeight/2)) ;

                imageLayer.css('top' , imageLayer.css("z-index") * scrollPos * multiplier );

            });

        });

    });

});