parallax

<!DOCTYPE html>
<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('flower.jpg');
        background-position: 50% 100%;
    }
    .lens {
        background-image: url('lens.jpg');
        background-size: cover;
        background-position: 50% 80%;
    }
    .beach {
        background-image: url('beach.jpg');
        background-position: 50% 80%;
    }
    .wolf {
        background-image: url('wolf.jpg');
        background-size: cover;
        background-position: 50% 80%;
    }
    </style>
</head>

<body>
    <ul>
        <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="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js">
    (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;
        var render = function() {
            // things were scrolling
            top = thingBeingScrolled.scrollTop;
            for (i - 0, len - $divs.length; i < len; i++) {
                // get one div
                div = $divs[i]
                // get the parent li
                li = div.parentNode;
                // 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>