サイト制作を請け負うときに、毎度の如くスクロールアニメーションにwow.jsを使うのだが、offsetのプロパティについてよく忘れるので覚書き。

あくまで、new WOW.init()を呼び出した際にピクセルなりパーセントなりを初期設定するときの話。

data-wow-offset=”ピクセル”のことではないです。

 

今は時間もあまりないので小ネタ程度にいつになくサラリと記しておく。

 

wow.jsの全体のアニメーション開始（animatedクラスが付与されるタイミング）の位置を、ある位置のピクセル分から通り過ぎた際に動作させる場合は以下のような形で設定する。

$(window).load(function(){
	new WOW({offset:50}).init();
});

これで50pxの余高を持たせる。

 

ウィンドウの高さそのものからパーセントで指定したい場合、ウィンドウサイズから割り出してoffsetに設定する。

var wowOffset = -1;
$(window).resize(function(){
	wowOffset = window.parent.screen.height / 5;
});
$(window).load(function(){
	if( wowOffset == -1 ) wowOffset = window.parent.screen.height / 5;
	new WOW({offset:wowOffset}).init();
});

上記で20％。調整したい場合は係数を変更すれば問題ないはず。

 

以上、過去に作業したコーディングデータに埋もれていたため発掘。

 

今更感があるが、急いでいる時にいざ使おうとして「あれ、どこやっけ？」となるとつらいので(´・ω・｀)