ページのスクロールに連動して様々なエフェクトで要素が表示されていくJavaScriptプラグイン［SCROLL TRIGGER］を紹介します。

実際に導入したサンプルは以下より。

SCROLL TRIGGER DEMO : https://on-ze.com/demo/js-scroll-trigger/

各要素のモーションは CSS3 のアニメーションに依存しており、痒いところに手が届く細やかな動作も実装可能。
最小限の手間でクオリティの高いサイトを構築できるのでオススメです。
公式サイトは以下。

jQuery不要で動くので、GitHubから動作に必要なファイル［ScrollTrigger.min.js］を入手してしまえば、あとは比較的簡単に設定できるはずです。

［SCROLL TRIGGER］の実装方法

まずはHTMLの任意の箇所で、ダウンロードした［ScrollTrigger.min.js］を読み込みます。

またこのとき同時にプラグインを初期化するコードを記述して、動作に必要な準備を整えます。

スクリプトファイルの読み込みと初期化

<script src="ScrollTrigger.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function(){
	ScrollTrigger.init();
});
</script>

HTMLの記述

続いてアニメーション処理を施したい要素に［date-scroll］属性を付与します。

<body>
...
<div data-scroll="">コンテンツ</div>
<div data-scroll="">コンテンツ</div>
<div data-scroll="">コンテンツ</div>
...
</body>

スタイルシートでアニメーションを設定

最後にスタイルシートの設定。

デフォルトのままで使用する際は、GitHub では次のコードが紹介されています。

.invisible {
	transition: opacity 0.5s ease;
	opacity: 0.0;
}

.visible {
	transition: opacity 0.5s ease;
	opacity: 1.0;
}

この例では『非表示（opacity:0;）だった要素がウィンドウ内に入ってから0.5秒かけて表示される』ようになっています。

各パラメーターの数値や記述を変えれば思い通りのエフェクトを施せる、という具合です。

［SCROLL TRIGGER］のオプション設定

以下、［SCROLL TRIGGER］で指定できるオプションです。
コールバック関数も用意されているので複雑な処理も実行できますね。

toggle() data-scroll="toggle(.animateIn, .animateOut)"
offset() data-scroll="offset(0,50px)"
addWidth data-scroll="addWidth"
addHeight data-scroll="addHeight"
centerHorizontal data-scroll="centerHorizontal"
centerVertical data-scroll="centerVertical"
once data-scroll="once"

詳しい使い方は公式サイトをご覧ください。

以上。
オススメのJavaScriptプラグイン［SCROLL TRIGGER］を紹介しました。

SCROLL TRIGGER DEMO : https://on-ze.com/demo/js-scroll-trigger/