jQueryでパララックスを自作する

jQueryでパララックスを自作する事が良くあるのだけど、基本的にはいつも同じ作業をしているが、毎回作るのが面倒なのでコピペが出来るように記事にする事にしました。

設計としては、

目標：クラス名を付けるだけでパララックスする。

class名：prlx

１、スクロール位置とステージサイズから対象が画面内に表示されているかどうかを判別する。

test.js

setInterval(function(){
		for(var i = 0 ; i < $(".prlx").length ; i++){
			if($(".prlx").eq(i).offset().top < $(window).scrollTop() + $(window).height()*0.9){
				$(".prlx").eq(i).addClass("-show")
				break;
			}
		}
	},100);

※画面の下から10%の位置に対象が来た場合に実行をする。
※スクロールイベントで実行もできるが、画面リサイズなども含めて考えてsetIntervalを利用する。
※表示されるアニメーションはクラスを付けてcssで管理する。

２、一度のイベントにつき、反応する対象を１つにする（横並びの対象に対しても時間差をつける）

test.js

var level = 0;
setInterval(function(){
		for(var i = 0 ; i < $(".prlx").length ; i++){
			if($(".prlx").eq(i).offset().top < $(window).scrollTop() + $(window).height()*0.9 && level == i){
				$(".prlx").eq(i).addClass("-show")
				level = i+1;
				break;
			}
		}
	},200);

※ずれは0.2秒づつにしてる。

３、他とバッティングしないようにオブジェクト化する。

test.js

var PRRX = {
	init:function(){
		var level = 0;
		setInterval(function(){
			for(var i = 0 ; i < $(".prlx").length ; i++){
				if($(".prlx").eq(i).offset().top < $(window).scrollTop() + $(window).height()*0.9 && level == i){
					$(".prlx").eq(i).addClass("-show")
					level = i+1;
					break;
				}
			}
		},200);
	}
}

使い方：

test.js

$(function(){
	PRRX.init();
});

４、クラスを設定する。

test.css

.prlx{
	transform:translate(0,100px);
	opacity:0;
	transition:all 0.6s ease-out,opacity 0.6s linear;
	&.-show{
		transform:translate(0,0);
		opacity:1;
	}
}

※0.6秒かけてフェードインしながら、100px上に上がってくる。アニメーション。

これで、クラスを変更すればお好みにパララックスが出来る。
いつも作ってたので、今後はコピペをするようにしています。

何かオススメの方法などあればご教授してくれると嬉しいです。