WebTecNote

[mootools]スクロールに追随させる – mooFollow.js

Tenderfeel

スクロールした時勝手に追随して動く要素を作成するクラス。mootools ver1.2以上用。
どう見てもwrapScrollです本当に（ｒｙ）っていうツッコミは置いといて、
スクロールした時とし終わった時のイベントとか、
トランジションや遅延の指定とかがしやすい。と思う。

Usage

以下をヘッダに書く。

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="moofollow.js"></script>

ファイルに分ける場合はmootoolsを上にしてください。
既にスクリプトが記述してあるファイルに追加する場合は、クラスをまるっとコピペすればＯＫです。
その場合はdomreadyイベントの外に貼ること。

window.addEvent(“domready”)で呼び出される関数内でインスタンスを作成する。

new mooFollow($("moo"));

インスタンス作成時にスクロールに追随させる要素のIDを指定する。
指定しない場合はデフォルト値の$(“follower”)になります。
１つのインスタンスにつき１つの要素を指定可。
$$(“.class”)などを使用すると複数の要素を取得してしまいエラーが発生します。

エフェクト発生時に、スクロールに追随させる要素へスタイル属性でpositionを追加するので、
特にCSS側でpositionとか設定してなくても動きます。

Option

new mooFollow([element,{options}]);

サンプルのソースは次のようになっています

window.addEvent('domready', function(){

	//デフォルト
	new mooFollow();
	
	//transition変更
	new mooFollow($("one"){transition:"bounce:out"});
	
	//onStartとonCompleteイベント追加
	var sample1 =new mooFollow($("two"){
		onStart:function(){$("two").setStyle("background-color","#3f454a");},
		onComplete:function(){$("two").setStyle("background-color","#e8e82a");}
	});
	
	//top、duration、transition変更,wartermarkON
	new mooFollow($("three"),{top:10,watermark:true,duration:"short",transition:"expo:in"});
});

Download

“mooFollow” をダウンロード

wtn_moofollow.zip – 1271 回のダウンロード – 26.50 KB

ライセンスはmootoolsと同じMITです。

モバイルバージョンを終了