Untitled

<html>
    <head>
        <style type="text/css">
            body{
                margin:0;
                padding:0;
            }
            ul{
                margin:0;
                padding:0;
            }
            ul li {
                list-style: none;
                overflow: hidden;
                hight: 600px;
            }
            .parallax-background{
                height: 700px;

            }
            .flower{
                background-image: url('flower.jpg');
                background-position:80% 50%;
            }
            .lens{
                background-image: url('lens.jpg');
                background-size: cover;
            }
            .beach{
                background-image: url('beach.jpg');
                background-position:45% 100%;
            }
            .wolf{
                background-image: url('wolf.jpg');
                background-position:45% 80%;
            }
        </style>
    </head>
    <body>
        <ul class="parallax">
            <li>
                <div class="parallax-background flower"></div>
            </li>
            <li>
                <div class="parallax-background lens"></div>
            </li>
            <li>
                <div class="parallax-background beach"></div>
            </li>
            <li>
                <div class="parallax-background wolf"></div>
            </li>
        </ul>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>

            (function($) {

                var $container = $(".parallax");
                var $divs = $container.find("div.parallax-background");
                var thingBeingScrolled = document.body;
                var liHeight = $divs.eq(0).closest("li").height();
                var diffHeight = $divs.eq(0).height() - liHeight;

                var i,len,div,li,offset,scroll,top;


                //render function has to loop trought each of the divs on the page
                var render = function(){
                    //console.log("hey");

                    //thing we are scrolling
                    top = thingBeingScrolled.scrollTop;

                    //loop through divs
                    for(i = 0, len=$divs.length; i < len; i++){

                        //get one div
                        div = $div[i];

                        //get the parent LI
                        li = div.parentNode;

                        //calculate offSetTOP of div
                        offset = $(div).offset().top;

                        //calculate the amount of scroll
                        scroll = Math.round(((top - offset) / liHeight) * diffHeight);

                        //apply the scroll amount
                        div.style.webkitTransform = "translate3d(0px,"+scroll+"px,0px)";
                        div.style.transform = "translate3d(0px,"+scroll+"px,0px)";

                    }
                };
                //the loop that renders through
                (function loop(){
                    requestAnimationFrame(loop);
                    render();
                })();

            })(jQuery);


        </script>
    </body>
</html>