Parallex Multiple Image

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Paralex</title>
		<style media="screen">
			body {margin: 0; background: url(bubble_bg.png) fixed no-repeat;}
			#prlx {position: fixed;background: url(prlx.png) no-repeat;width: 100%;height: 500px; z-index: -1;}
			#prlx_1 {position: fixed;background: url(prlx.png) no-repeat 200px 800px;width: 100%;height: 1000px; z-index: -1; overflow: hidden;}
		</style>
		<script type="text/javascript">
			function parallex() {
				var prlx = document.getElementById('prlx');
				var prlx_1 = document.getElementById('prlx_1');
				prlx.style.top = -(window.pageYOffset/6) + 'px';  //you can controll parallex animation by this
				prlx_1.style.top = -(window.pageYOffset/2) + 'px';  //you can controll parallex animation by this
			}
			window.addEventListener("scroll", parallex, false);
		</script>
	</head>
	<body>

		<div id="prlx"></div>
		<div id="prlx_1"></div>
			<div class="wrapper">
				<script type="text/javascript">
					for(i = 0; i < 160; i++){
						document.write("<h2>"+(i+1)+ ") Dummy content for paralex. </h2>");
					}
				</script>
			</div>
	</body>
</html>