FadeIn on Scroll (jQuery)

Used to answer a question on StackOverflow.

by Phil Button

HTML

<div class="header"></div>
<div class="menu">
<div class="perSpective"><div class="rowMenu"><div class="menuItem">Fade In 01</div></div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
  <div class="rowMenu"><div class="menuItem">Fade In 01</div></div>
</div>

CSS

body {
	overflow-x: hidden;
	overflow-y: hidden;
}
.header {
	height: 40px;
	border: 2px solid red;
}
.menu {
	position: relative;
	width: 90vw;
	height: 80vh;
	margin: auto;
	border: 1px solid blue;
	border-width: 2vw 3vh;
	overflow-x: hidden;
	overflow-y: scroll;
}
.rowMenu {
	position: relative;
	height: 50px;
	margin: 10px 5px;
	padding: 10px 5px;
	background-color: lightgreen;
	opacity: 1;
}
.perSpective {
  position: relative;
  -webkit-perspective: 500px;
  perspective: 500px;
}
.menuitem
{
    position: relative;
	  margin: auto;
    width: 86vw;
    height: 7vw;
}

JavaScript

$(window).on("load",function() {
	$(".menu").scroll(function() {
		var parentBottom = $(this).innerHeight();
		$(".rowMenu").each(function() {
			var objectHeight = $(this).outerHeight();
			var objectTop = $(this).position().top;
			var objectBottom = objectTop + objectHeight;
			
			//fade in/out based on visible percentage of element
			if (objectTop < 0) {
				if (objectBottom > 0) {$(this).fadeTo(0,objectBottom/objectHeight);}
				else if ($(this).css("opacity")!=0) {$(this).fadeTo(0,0);}
			} else if (objectBottom > parentBottom) {
				if (objectTop < parentBottom) {$(this).fadeTo(0,(parentBottom-objectTop)/objectHeight);}
				else if ($(this).css("opacity")!=0) {$(this).fadeTo(0,0);}
			} else if ($(this).css("opacity")!=1) {$(this).fadeTo(0,1);}
		});
		$(".menuItem").each(function() {
			var objectHeight = $(this).outerHeight();
			var objectTop = $(this).position().top;
			var objectBottom = objectTop + objectHeight;
			var rotateFactorTop = parseInt(30 * (1/$(this).css("opacity")));
			var rotateFactorBottom = parseInt(30 * $(this).css("opacity"));
			var rotateTop = "rotateX(" + rotateFactorTop.toString() + "deg)";
			var rotateBottom = "rotateX(" + rotateFactorBottom.toString() + "deg)";
			
			console.log(rotateTop, rotateBottom);
			
			//fade in/out based on visible percentage of element
			if (objectTop < 0) {
				if (objectBottom > 0) {$(this).css("transform",rotateTop);}
				else if ($(this).css("opacity")!=0) {$(this).css("transform","rotateX(0deg)");}
			} else if (objectBottom > parentBottom) {
				if (objectTop < parentBottom) {$(this).css("transform",rotateBottom);}
				else if ($(this).css("opacity")!=0) {$(this).css("transform","rotateX(90deg)");}
			} else if ($(this).css("opacity")!=1) {$(this).css("transform","rotateX(0deg)");}
		});
	}).scroll(); //invoke scroll-handler on page-load
});