Site1

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="pindex.css"  />
<title>Parallax Site</title>


        <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;


            }

            .turntables {
                background-image:url(images/turntables.jpg);
                background-position:70% 50%;
            }

            .dogphones {
                background-image:url(images/dogphones.jpg);
                background-position:10% 60%;
            }

            .mic {
                background-image:url(images/mic.jpg);
                background-position:100% 70%;
            }

            .speakers {
                background-image:url(images/speakers.jpg);
                background-position:45% 100%;
            }

            .bars {
                background-image:url(images/bars.jpg);
                background-position:45% 100%;
            }


            </style>

</head>

<body>

    <ul class="parallax-background">
        <li>
            <div class="parallax-background turntables"></div>
        </li>
        <li>
            <div class="parallax-background dogphones"></div>
        </li>
        <li>
            <div class="parallax-background mic"></div>
        </li>
        <li>
            <div class="parallax-background speakers"></div>
        </li>
        <li>
            <div class="parallax-background bars"></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;

                    var render = function() {

                        // thing were scrolling
                        top =  thingBeingScrolled.scrollTop;

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

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

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

                            // calculate the offsetTOP of div
                            offset = $(divs).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>