kdcsライブラリー

jQueryを使わないタイプ
※1行目が「.scroll(function ()」だとページをリロードしたときに要素が表示されないので「.on(‘load scroll’, function ()」とすることでスクロールとリロード両方で動作するようになる。
※適用したい要素のclassに「fadeUp」を記述。スクロールでclassに「on」が付加される。

$(window).on('load scroll', function (){
	$('.fadeiUp').each(function(){
		var elemPos = $(this).offset().top,
		scroll = $(window).scrollTop(),
		windowHeight = $(window).height();

			if (scroll > elemPos - windowHeight + 150){
				$(this).addClass('on');
			}
	});
});

css
※通常は.fadeUpと.fadeUp.onの2つ。要素3つを順番にフェードアップさせる場合(2)(3)を追加する。

.fadeUp {
  transition: 0.8s ease-out;
  transform: translateY(80px);
  opacity: 0;
}
.fadeUp.on {
  transform: translateY(0);
  opacity: 1.0;
}
.fadeUp.on:nth-of-type(2) {
    transition-delay:200ms;
    -webkit-transition-delay:200ms;
}
.fadeUp.on:nth-of-type(3) {
    transition-delay:400ms;
    -webkit-transition-delay:400ms;
}