<div class="box" id="box1"> 
	<div>
		<p><span>1</span></p> 	
		<p><span>2</span></p> 	
		<p><span>3</span></p> 	
		<p><span>4</span></p> 	
		<p><span>5</span></p> 	
		<p><span>6</span></p> 		 		
	</div>
</div>

<div class="box" id="box2"> 
	<div>
		<p><span>1</span></p> 	
		<p><span>2</span></p> 	
		<p><span>3</span></p> 	
		<p><span>4</span></p> 	
		<p><span>5</span></p> 	
		<p><span>6</span></p>  	
		<p><span>7</span></p> 	
		<p><span>8</span></p> 	
		<p><span>9</span></p>   
	</div>
</div>

<div class="box" id="box3"> 
	<div>
		<p><span>1</span></p> 	
		<p><span>2</span></p> 	
		<p><span>3</span></p> 	
		<p><span>4</span></p> 	
		<p><span>5</span></p> 	
		<p><span>6</span></p>  	
		<p><span>7</span></p> 	
		<p><span>8</span></p> 	
		<p><span>9</span></p> 
		<p><span>10</span></p> 	
		<p><span>11</span></p> 	
		<p><span>12</span></p> 	
		<p><span>13</span></p> 	
		<p><span>14</span></p> 	
		<p><span>15</span></p> 	
	</div>
</div>

body { 
	height: 10000px;
}

.box {
	width: 10000px;
	position: fixed; 
	height: 5000px;
	left: 0;  
	> div {
		float: left;
		display: block;
		position: relative;
		height: 100%;
	}
}

#box1 { 
	left: 0; 
	height: 50%;  
}

#box2 { 
	height: 30%;
	top: 50%;  
}

#box3 {
	height: 20%;
	top: 80%; 
}

p { 
	float: left; 
	height: 100%; 
	position: relative;  
	display: block;
	overflow: hidden;
	> span {
	 	display: block;
	 	height: 100%;	
		width: 500px;
	}
}

#box1 span { width: 800px; }
#box2 span { width: 400px; }
#box3 span { width: 200px; }

p > span { background: #D91E18; }
p:nth-child(2n) > span { background: #26A65B; }
p:nth-child(3n) > span { background: #F5D76E; } 
p:nth-child(4n) > span { background: #4183D7; } 

i = 5000;  

$(window).scroll(function() { 
	
	var st = $(this).scrollTop();  
	
 	$('body').css('height',st+i);
 	$('.box').css('width',st+i*1000);

 	$('#box1').css('margin-left',st*-1);
	$('#box2').css('margin-left',(st/4)*-1);
  $('#box3').css('margin-left',(st/8)*-1); 

	var t = $('#box1 > div:last-child > p:last-child').offset();
	var s = $('#box2 > div:last-child > p:last-child').offset();
	var z = $('#box3 > div:last-child > p:last-child').offset();

	if (t.left < 2000) { $('#box1 > div:first-child').clone().appendTo('#box1'); } 
	if (s.left < 2000) { $('#box2 > div:first-child').clone().appendTo('#box2'); }
	if (z.left < 2000) { $('#box3 > div:first-child').clone().appendTo('#box3'); }
 	
});