Untitled

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

    <style type="text/css">
		body{
			margin:0;
			padding:0;

		}
		ul{
			margin-top:0px;
			margin-left:25px;
			margin-right:25px;
			padding-top:0px;

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

		}
		.parallax-background{
			height:800px;
		}
		.image1{
			background-image:url(images/image1.jpg);
			background-position:50% 20%;
			background-size:cover;


		}
		.image2{
			background-image:url(images/image2.jpg);
			background-size:cover;
			background-position:50% 10%;


		}
		.image3{
			background-image:url(images/image3.jpg);
			background-size:cover;

		}
		.image4{
			background-image:url(images/image4.jpg);
			background-size:cover;
			background-position:50% 10%;


		}

	</style>
</head>

<body>
	<ul class="parallax">
    	<li>
        	<div class="parallax-background image1" ></div>
        </li>
    	<li>
        	<div class="parallax-background image2"></div>
        </li>
    	<li>
        	<div class="parallax-background image3"></div>
        </li>
    	<li>
        	<div class="parallax-background image4"></div>
        </li>
    </ul>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
	</script>
    <script>

		$(document).ready(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,myScroll,top;

			var render=function(){
				//loop thur divs
				top=thingBeingScrolled.scrollTop;
				for(i=0;len<$divs.length;i++){
					//get one div
					div =$divs[i];

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

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

					//calculate the amount to scroll

					myScroll=Math.round(((top - offset)/ liHeight)* diffHeight);

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

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

		});
	</script>
</body>
</html>