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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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