Parallax Website

<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;
					position:relative
				}

				.parallax-background {
					height:700px;
				}

				.lens {
					background-image:url('images/lens.jpg');
					background-position: 40% 100%;
				}
				.flower {
					background-image:url('images/flower.jpg');
					background-position:50% 60%;
				}
				.Park {
					background-image:url('images/Park.jpg');
					background-position: 80% 100%;
				}
				.headphones {
					background-image:url('images/headphones.jpg');
					background-position: 50% 100%;
				}


				ul li .subcontent {
					position:absolute;
					top:100px;
					left:100px;
					colour:#FFF;
					font-family:Arial, Helvetica, sans-serif
				}
				h1 {
					font-size:70px;
					margin-bottom:0px;
				}
				h2 {
					font-size:56px;
					margin-bottom:0px;
				}

			</style>


	</head>

	<body>

    	<ul class="parallax">
    		<li
        		<div class="parallax-background flower"></div>
    		</li>
        	<li>
        		<div class="parallax-background lens"></div>
                <div class ="subcontent">
                	<h1>Sample Text</h1>
                    <h2>Hey there</h2>
    		</li>
        	<li>
        		<div class="parallax-background park"></div>
    		</li>
        	<li>
        		<div class="parallax-background headphones"></div>
    		</li>
   		</ul>


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