skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

画像に影やリフレクションを付ける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」サンプル

記事作成：2007年09月23日

前の記事：メニューツリーを作成するjavascript「Slidinglist」
次の記事：アイキャッチなメニューを作成するjavascript「Menu with slider」