画像に影やリフレクションを付けるjavascript「efxFactory」

｜

｜

サイト作成時によく使用する画像。
それを加工したいと思うのはサイト運営者の性でしょう。
efxFactoryは、画像に影やリフレクションを付与できるmootoolsベースのjavascriptです。

使用方法
efxFactoryからダウンロードしたmootools.jsとefxFactory.jsを以下の通りheadに加えます。
<script src="http://yourdomain/mootools.js" type="text/javascript"></script> <script src="http://yourdomain/efxFactory.js" type="text/javascript"></script>
さらに影やリフレクションの指定をします。
<script type="text/javascript"> window.onload = function(){ efxFactory.shadow($("画像のid名")); //影をつける場合 efxFactory.reflect($("画像のid名")); //リフレクションをつける場合 } </script>
あとは画像に上で指定したid名を付与するとともに、style属性で、position:relative;z-index:100とする必要があります。
オプション
・影の場合
　efxFactory.shadow($("id名"),{amount:0.5}); //影の大きさ　efxFactory.shadow($("id名"),{opacity:1/20}); //影の透明度　efxFactory.shadow($("id名"),{borderColor:"#ffffff", color:"red"}); //枠の色と、影の色
・リフレクションの場合
　efxFactory.reflect($("id名"),{opacity:1/6}); //リフレクションの透明度　efxFactory.reflect($("id名"),{distance:2}); //リフレクションと画像の距離　efxFactory.reflect($("id名"),{amount:1/5}); //リフレクションの距離
画像に影やリフレクションを付けるjavascript「efxFactory」サンプル