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

Tenderfeel

16年前

スクロールした時勝手に追随して動く要素を作成するクラス。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}]);

element
スクロールに追随させる要素のID。オプションを指定する場合は必須になります。デフォルトは $(“follower”)
transition:
追っかけ時のエフェクトに追加するアニメーション方程式。Fx.Transitionsを参照のこと。デフォルトは”sine:out”
duration:
エフェクトが始めるまでの遅延時間。ミリ秒で指定する場合は数値で。デフォルトは”long”(1000ms)
link:
Fxエフェクト実行中に呼び出されたものをどうするか。デフォルトは”cancel”
top:
スクロールが止まった時の位置。数値のみでpxは必要ありません。デフォルトは初期位置と同じ距離を維持します。
watermark:
スクロールが始まった時に「トップへ戻るリンク」をスクロール要素内に追加します。
trueにすると実行。デフォルトはfalse
watermarkHtml:
「トップへ戻るリンク」のアンカータグ内HTML。テキストまたはHTMLタグが有効です。
デフォルトは「▲ページトップに戻る」
watermarkHref: (v1.5)
「トップへ戻るリンク」のアンカーhref。テキスト有効。
デフォルトは「#header」
SmoothScroll: (v1.5)
watermarkで追加される「トップへ戻るリンク」をクリックした時にヌルッとスクロールさせるかどうか。
MoreのFx.SmoothScrollが読み込まれている場合に限り有効。デフォルトはfalse
onStart:
エフェクトが始まった時に呼び出されるイベント
onComplete:
エフェクトが終わった時に呼び出されるイベント

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

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 – 1591 回のダウンロード – 26.50 KB

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

2010-01-08 ver1.5 SmoothScroll内蔵化。移動範囲等についての調整。
2009-03-17 ver1.3 initializeの調整
2009-03-12　var1.2 watermark追加。親要素にposition追加するの再開でsetStyle周り変更
2009-02-23　ちょっと変更（親要素にposition追加するのやめた）

Usage

Option

Download

シェア