寺子屋未満

[script.aculo.us Reflector]
http://mir.aculo.us/2006/4/27/like-reflections-try-the-reflector
（サンプル）http://mir.aculo.us/stuff/reflector/reflector.html
prototype.jsとscript.aculo.usを使用して、
画像に鏡面効果（鏡に映ったように見せる効果）を与えるスクリプトです。

[必要なJavaScriptソースの取得]
◆scriptaculous.jsの設定
[script.aculo.us]
http://script.aculo.us/
get it already![Downloads page]をクリックし、ダウンロード画面へ。
current vertion[scriptaculous-js-1.7.0.zip]をダウンロードします。
（拡張子、「.tar.gz」「tar.bz2」のファイルもありますので、
環境に合わせてダウンロードします。）
※インストール方法などについては[Getting Started]に記載されています。

ダウンロードすると、サンプルHTMLやJavaScriptのソースが梱包されています。
srcフォルダに、さまざまなエフェクト用のJavaScriptソースファイルが、
libフォルダに、必要となるフレームワークprototype.jsが含まれています。
（今回の鏡面効果で実際に使用されるsrcのソースは
scriptaculous.jsとeffects.js・builder.jsのようです。）

◇prototype.jsを単独でダウンロードする場合
今回は同胞されているので必要ありませんが、
prototype.jsを単独でダウンロードする場合は以下のサイトから行います。

[prototype.js]
http://www.prototypejs.org/
DownLoadページの、[Download the latest stable version―1.5.1.1]をクリックし
prototype.jsをダウンロードします。
（firefoxでは、右クリック「名前をつけてリンク先を保存」でソースを取得します。）

[HTMLソース上の設定]
ヘッダに宣言するJavaScriptファイルは以下の2ファイルになります。
script.aculo.usに含まれているその他のJavaScriptファイルは、
効果に応じてscriptaculous.js内部から使用されます。
<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>

[鏡面効果JavaScriptコード]
以下のコードを追加するにより、鏡面効果を設定することができます。

<script type="text/javascript">
var Reflector = {
  reflect: function(element) {
    element = $(element);
    options = ({
      amount: 1/3,
      opacity: 1/3
    }).merge(arguments[1] || {});

    var p = element.parentNode, n = element.nextSibling;
    var d = 1.0/(element.height*options.amount);

    (element.height*options.amount).times( function(line) {
      var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
        [Builder.node('img',{src:element.src,
          style:'margin-top:-'+(element.height-line-1)+'px'
        })]);
      p.insertBefore(h,n);
      $(h).setOpacity((1-d*line)*options.opacity);
    });
  }
}
</script>

このコードの部分を適用したいHTMLに記述しても構いませんし、
外部ファイル化して読み込んでもOKです。
外部ファイル化する場合、
prototype.jsとscriptaculous.jsを先に読み込むようにします。

[HTMLソース上の設定]
鏡面効果を出したい画像のimgタグにIDを付与し、
以下のスクリプトを実行させます。
Reflector.reflect('[imgタグに指定したid]');
スクリプトはwindow.onload時のイベントとして定義するか、
imgタグより後にスクリプトを記述すればOKです。

[サンプル]
今回もZorgより。Lotus　Photo by sige
Sampleはこちら。

この効果はかなりカッコイイですね。
次回はソースを解析しつつ、オプション効果について少し調べます。