header
	span ヘッダー

main
	- for (var i = 0; i < 10; i++)
		.inner.fade-block
			p コンテンツ#{i+1}
			
footer
	span フッター

/* フェードイン時のスタイル */
.fade-block {
	opacity: 0;
	transform: translateY(45px);
	transition: opacity 1s ease-in-out, transform 0.5s ease-in-out;
	&.active {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ここはただの箱のスタイル */
header,
.inner,
footer {
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Nico Moji";
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 0.075em;
	box-sizing: border-box;
}

header,
footer {
	background: #32a238;
	color: #fff;
}
header {
	height: 100px;
}
footer {
	height: 150px;
	transform: translateY(0) !important;
}

.inner {
	height: 300px;
	margin: 50px;
	padding: 20px;
	border: 1px solid #32a238;
	color: #32a238;
}

(function(window, $) {
	'use strict';

	// Set Namespace
	var APP = (window.APP = window.APP || {});

	APP.SetFadeBlock = function($elm) {
		var that = this;
		that.$elm = $elm;
		that.offset = 0.8;
		that.ACTIVE = 'active';
		
		that.fade();
		$(window).on('scroll resize', function() {
			that.fade();
		});

	};
	APP.SetFadeBlock.prototype = {
		fade: function() {
			var that = this;
			var st = $(window).scrollTop();
			var wh = $(window).height();
			var targetPoint = that.$elm.offset().top - parseInt(that.$elm.css('transform').match(/[0-9]+/g)[5]);
			var startPoint = Math.floor(targetPoint - wh * that.offset);
			var endPoint = Math.floor(targetPoint + wh * (1 - that.offset));

			if (
				st >= startPoint &&
				st <= endPoint &&
				!that.$elm.hasClass(that.ACTIVE)
			) {
				setTimeout(function() {
					that.$elm.addClass(that.ACTIVE);
				}, 100);
			}
		}
	};

	$(function() {
		$('.fade-block').each(function() {
			new APP.SetFadeBlock($(this));
		});
	});

})(window, jQuery);