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

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で伸縮するメニューができる

■写りこみ参考リンク

add to hatena hatena.comment (46) add to del.icio.us (22) add to livedoor.clip (8) add to Yahoo!Bookmark (3) Total: 79

Comments:0

Comment Form
Remember personal info

Trackbacks:2

Trackback URL for this entry
http://loconet.web2.jp/blog/archives/2007/03/javascriptmooto.html/trackback
Listed below are links to weblogs that reference
JavaScript(mootools)で映りこみを表現する(Reflection.js for mootools) from webデザイナーのナナメガキ
trackback from hands in hands 07-06-13 (水) 9:47

links for 2007-06-13

カッコよすぎるFlashサイト集:phpspot開発日誌 (tag…

trackback from rest of the WorldPress 07-09-25 (火) 1:40

mootoolsが気になる

jQueryとかspryとかYUIとかMochikitとかprototypeとかもうJSライブラリも百花繚乱すぎて何から勉強したらいいものやら。
とりあえ…

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

Search
Feeds
Meta

Return to page top