jQueryで、スクロールすると各要素をフワッと表示(フェイドイン)させる方法について

Question

ブログ記事などを参照し、ある程度望み通りのものはできました。
（上からスクロールしていくに従って表示することはできた）

ただ、ページ下部でリロードした際などに、下から上にスクロールさせても同様の表現をしたいのですが、
その方法がわかりません。

●参考にしたブログ記事とデモページ
海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法|imasashi.net
[デモ] 要素が画面内に入ったらフェードインするエフェクト|imasashi.net

（他の記事も同様の記述が多かったと思います。）

$(function(){
	$(window).scroll(function (){
		$('.fadein').each(function(){
			var elemPos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > elemPos - windowHeight + 200){
				$(this).addClass('scrollin');
			}
		});
	});
});

●下からスクロールさせてもフェイドインしているサイトの例。
techacademy

できれば参考にした記事の記述を元にどうアレンジすれば
実現できるか教えていただけると助かります。
よろしくお願いします。

Answer 1

このjQueryを使ってみてはいかがでしょうか。

ScrollTrigger
http://www.webcreatorbox.com/tech/animation-libraries/

Comments

[ryousuke_]

ご回答ありがとうございます。

デフォルトの仕様（画面内→画面外にスクロールするたびに何度もフェイドイン、フェイドアウトする）
は望んだ形ではなかったのですが、<data-scroll="once">というオプションで停止することができるようです。

自作でなんとかならないかとも思っていたのですが、
今回はこちらのプラグインを使わせてもらおうと思います。

<補足>
記事先のコード例はファイルが更新されてたせいか、効かなかったため、追記しておきます。

【記事先のコード例】
<script>
document.addEventListener('DOMContentLoaded', function(){
ScrollTrigger.init();
});
</script>

↓↓↓↓↓↓↓

【GitHubにある記述】
<script>
document.addEventListener('DOMContentLoaded', function(){
var trigger = new ScrollTrigger();
});
</script>