MyParalax

<html>

<head>


    <style type="text/css">

        body { margin:0;padding:0;}
        ul { margin:0; padding:0;}

        ul li{ list-style:none;
                overflow:hidden;
                height:600px;
                }

        .parallax-background{

                height:700px;

            }

        .flower { background-image:url(images/flower.jpg);
        background-color:#ff2233;
                background-size:cover;
        }
        .beach { background-image:url(images/beach.jpg);
        background-position:50% 60%;
                background-size:cover;
        }
        .lense { background-image:url(images/lanse.jpg);
                background-size:cover;
        }
        .cricket { background-image:url(images/cricket.jpg);
                background-size:cover;
        }

    </style>

</head>


<body>

    <ul class="parallax">
        <li>
            <div class="parallax-background flower"></div>
        </li>

        <li>
            <div class="parallax-background beach"></div>
        </li>

        <li>
            <div class="parallax-background lense"></div>
        </li>

        <li>
            <div class="parallax-background cricket"></div>
        </li>
    </ul>


    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.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;

                                var render = function() {

                                        //thing we're scrolling
                                        top = thingBeingScrolled.scrollTop;

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

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

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

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

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

                                        }


                                };

                                (function loop(){
                                        requestAnimationFrame(loop);
                                        render();
                                })();

                        })(jQuery);


                        </script>


</body>


</html>