parallax


<!DOCTYPE html>
<html>
<head>
	<title>Parallax</title>
	<link rel="stylesheet" type="text/css" href="css/parallax.css">
</head>
<body>
<div>
	<ul class="parallax">
		<li class="parallax-section">
			<div class="parallax-bkg section1"></div>
		</li>
		<li class="parallax-section">
			<div class="parallax-bkg section2"></div>
		</li>
		<li class="parallax-section">
			<div class="parallax-bkg section3"></div>
		</li>
		<li class="parallax-section">
			<div class="parallax-bkg section4"></div>
		</li>
	</ul>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="js/parallax.js"></script>
</body>
</html>

*{
	padding: 0;
	margin: 0;
}

ul{

}
li{
	list-style: none;
}
.parallax{
	padding: 0;
	margin: 0;
}
.parallax-section{
	overflow: hidden;
	height: 100vh;
	width: 100vw;
	position: relative;
}
.parallax-bkg{
	height: 100vh;
	width: 100%;
}
.section1{
	background-image:url('../img/img2.jpg');
	background-size: cover;
}
.section2{
	background-image:url('../img/img3.jpg');
	background-size: cover;
}
.section3{
	background-image:url('../img/img4.jpeg');
	background-size: cover;
}
.section4{
	background-image:url('../img/img5.jpg');
	background-size: cover;
}


/*function($){}(JQuery());*/
$(document).ready(function(){
	/*alert("Document connected");*/

// shim layer with setTimeout fallback
/*http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/*/
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();


	/*default vraibales*/
	var $container =$(".parallax"),
		$sectionContainers=$container.find("div.parallax-bkg"),
		sectionType="li";
	var i,
		len,
		section,
		parentSection,
		offset,
		scroll
		;

	var scrollingElement=document.body;
	var top= scrollingElement.scrollTop;
	var heightOfSection=$sectionContainers.eq(0).closest(sectionType).height(),
		diffheight = $sectionContainers.eq(0).height()-heightOfSection
			;


			console.log(diffheight);
	/*end default varibales*/
	var render=function(){
		/*console.log("We are now In Render function");*/

		//lop through parralx sections

		for (i = 0, len=$sectionContainers.length; i < len; i++) {
/*			console.log($sectionContainers[i]);*/

			section=$sectionContainers[i];
			/*console.log(section);*/
			//get parent of section
			parentSection=section.parentNode;
			/*console.log(parentSection);*/
			//calculate the offsetTop of section
			//offset top is the area above current div that is it is the area from beginning of document to div top
			offset=$(section).offset().top;
			/*console.log(offset);*/
			//calculate amount of scroll
			scroll= Math.round(((top - offset)/heightOfSection)*diffheight);
			/*console.log(scroll);*/

			//apply the scroll amount
			section.style.webkitTransform = "translate3d(0px, "+scroll+"px, 0px)";
		};

	};

	(function rendererLoop(){
		requestAnimationFrame(rendererLoop);
		//60 frames persec see Paul Irish's render function to add more browser compatiblity
		render();
	})();

});