JavaScript(mootools)で映りこみを表現する（Reflection.js for mootools）

web2.0おなじみの映りこみをJavaScriptで表現できるライブラリはReflection.jsが有名でかつ軽いですが、mootoolsでもできるみたいです。「Reflection.js for mootools」というプラグインでmootools.jsと一緒に使います。

Reflection.js for mootoolsはデモがよく出来ているので以下にほぼそのまま載っけます。透明度や高さ、背景色も変えられるので機能が一発でわかるようになってます。デモって大事ですね。

使い方は簡単で「reflection.js」と「mootools.js」を読み込んで、映りこみさせたい画像に「class=”reflect”」とするだけ。この辺はReflection.jsと同じですかね。

<script type="text/javascript"  xsrc="/js/mootools.js" mce_src="/js/mootools.js"   ></script>
<script type="text/javascript"  xsrc="/js/reflection.js" mce_src="/js/reflection.js"   ></script>

<img xsrc="test.jpg" mce_src="test.jpg"    class="reflect" />

mootoolsの必要なモジュールは以下の通り。

• Native: Array, String, Function, Element
• Window: Window.Base

また「class=”reflect”」とするとその画像が強制的にblock要素になるので、横に並べたい場合はCSSでfloat:leftを設定する。

javascriptから制御する場合は以下のように扱える。

Reflection.add('photo1', options);  //Reflectionオブジェクトを使う場合

$('photo1').addReflection(options);  //addReflectionプロパティを使う場合

「options」はheight（高さ）とopacity（透明度）があって、それぞれ0〜1の値で設定する。デフォルトはheightが1/3（0.3333…）、opacityが1/2（0.5）らしい。optionを指定するとコードは以下のようになる。

$('photo1').addReflection({height:0.5,opacity:0.75});

でもまあ、Reflection.jsの方がファイル一つだし楽ですかねぇ。

mootools関連エントリー：
javascriptで伸縮するメニューができる

■写りこみ参考リンク

• Reflection.js
• script.aculo.us Reflector
• Kagami - Web2.0風 映りこみ（反射）画像API - Bambino Labs