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

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

“mooFollow” をダウンロード wtn_moofollow.zip – 613回のダウンロード – 27 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追加するのやめた)

1件のコメント

  1. 質問させていただきたいのですが、
    moofollow.js内のmakeFxにてonComplete時に
    fireEventを行っていると思うのですが、このfireEventで
    (マニュアルを参照しましたがクラスインスタンス内のイベントを発生させる、とありました)
    ‘complete’を指定しているのですがmoofollow.js内に無い
    関数だと思うのですがこの行では何がおこなわれているのですか?
    mootoolsの基本的な事なのかも分かりませんが、
    お教えいただけますか?

    お忙しいとは思いますがよろしくお願いいたします。

    Reply
  2. お答えします!

    冒頭のこの行で
    >Implements: [Options,Events],
    Class:Eventを実装して、新しくmoofollowクラスを作成しています。

    Class:Eventをクラスに実装すると’complete’、 ’start’、 ‘cancel’のようなイベント機能を追加することが出来ます。
    そのため、moofollowクラスにcompleteメソッドはありませんが、fireEventで呼び出すことが出来るというわけです。

    オプションでは次のようにonをつけて書いていますが
    options: {
    onStart:$empty,
    onComplete:$empty
    }
    これはonを省略するとClass:Optionsにイベントとして認識されないからです。
    オプションで‘onComplete’とすると’complete’イベント、’onStart’は’start’イベントになります。
    (complete:$emptyだと何も起きなくなります。把握してないと大抵ハマる)
    $emptyは空の関数(プレイスホルダー)です。

    Reply
  3. お答えいただきありがとうございます!!
    参考になりました。

    自分でもmootoolsの中を見てみた所、
    fireEventではtype(第一引数)をremoveONっていうのに渡して
    onを取って先頭文字を小文字にして、this.$events[type]があれば
    そのままthisを返して、なければfn.createで作っているみたいですね・・・
    (恐らくですが・・・)

    それで、また基本的な質問のようで恐縮なのですが、
    fireEventでstart、completeを行う意味、というか何を行う為なのでしょうか?
    FxClassのstart、completeを覗いてみたのですが、startは通らなくても
    動作出来る様な気がしますし・・・(間違っていたらすみません)

    また、smoothgallery(http://smoothgallery.jondesign.net/)という
    プラグインの中身を学習の為、調査したのですが
    例えば、
    showCarousel: function () {
    console.log(‘—————————————————showCarousel start’);
    this.fireEvent(‘onShowCarousel’);
    this.carouselContainer.start({
    ‘opacity’: this.options.carouselMaximizedOpacity,
    ‘top’: 0
    }).chain(function() {
    this.carouselActive = true;
    this.carouselWrapper.scroller.start();
    this.fireEvent(‘onCarouselShown’);
    this.carouselContainer.options.onComplete = null;
    }.bind(this));
    console.log(‘—————————————————showCarousel end’);
    },
    という記述があり(console.logは私がいれました)fireEventで
    命名から判断すると開始、終了でfireEventで
    onShowCarousel、onCarouselShownが実行されています。
    これはthis.$events[type]には当然ないのでfn.createを通ってると
    思います。
    こちらの方でもやはりfireEventをする意味、というか何を行う為なのか
    よく理解できていません。

    度々申し訳ないのですが上記に関してもご教授いただけますでしょうか?
    お忙しいとは思いますがよろしくお願いします。

    Reply
  4. >fireEventでstart、completeを行う意味、というか何を行う為なのでしょうか?
    >FxClassのstart、completeを覗いてみたのですが、startは通らなくても
    >動作出来る様な気がしますし・・・(間違っていたらすみません)

    んー…イベントから別のイベントを発生させるためです。
    Eventsクラスには「Eventsをインプリメントしたクラスのイベントは、
    オプションかaddEventで追加しなくてはならない(.options.onEventNameではダメ)」という制約があるので

    mooFollowのソースでは

    options:{
    onStart:$empty,
    onComplete:$empty
    }

    このようにoptionsでmooFollowクラスにstartとcompleteイベントを追加しています。

    上記デフォルトは空関数にしているので何も実行されませんが、
    何かしら指定された場合はイベント発生時にその内容が実行されなければなりません。

    mooFollowのstartとcompleteは要素がスクロールし始めるときと停止した時なので、
    要素を移動させているFx.MorphのstartとcompleteにfireEventを追加し

    onComplete:function(){
    this.fireEvent('complete');
    if(this.options.watermark == true) this.watermark.fade("in",{duration:500});
    }

    Fx.MorphのonCompleteで、(optionsで追加した)クラスのcompleteイベントを発生させるようにしています。

    fireEventは「クラスインスタンス内の特定のタイプのイベントをすべて発生させる」
    『全て発生させる』ので、複数追加された場合はすべての内容が実行されます。

    ▼オプション

    var sample1 =new mooFollow($("two"),{
    onStart:function(){$("two").setStyle("background-color","#3f454a");},
    onComplete:function(){$("two").setStyle("background-color","#e8e82a");},
    onComplete:function(){$("two").setStyle("border","solid 1px red");}
    });

    ▼addEventでもOK

    sample1.addEvent("complete",function(){
    $("two").setStyle("border","solid 1px red");
    $("two").setStyle("width","80px");
    });

    ▼clickはクラスにイベントを追加してないから何も起きない

    sample1.addEvent("click",function(){
    $("two").setStyle("border","solid 1px red");
    });

    これはこういうもんだとしか把握してないので、的外れな内容だったらすみません。

    で、以上を踏まえて考えるとサンプルに挙げられたsmoothgalleryのソースは
    独自のEvent追加するためかなーという気がしますが真の用途は良く分かりません。

    ▼demo.htmlでこうすると

    myGallery.addEvent("showCarousel",function(){ console.log("show") });
    myGallery.addEvent("carouselShown",function(){ console.log("shown") });

    サムネイルオープンとオープン完了時にコンソールログがでますが、
    fireEvent()の部分をコメントアウトすると何も出なくなります。

    Reply

Leave a Comment.