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

Usage

以下をヘッダに書く。

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

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

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

new mooFollow($("moo"));

インスタンス作成時にスクロールに追随させる要素のIDを指定する。
指定しない場合はデフォルト値の$(“follower”)になります。
1つのインスタンスにつき1つの要素を指定可。
$$(“.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

“1Column 6BOX 2Halves” をダウンロード – 0 回のダウンロード –

ライセンスは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追加するのやめた)