画像を反射させ半透明の影を表示させる方法【reflection.js】

reflection.jsを使ってjpg画像に半透明の反転した影を表示させる方法をご紹介します。

画像を反射させ半透明の影を表示させるCSSの記述

※必要に応じて変更して下さい。

<style type="text/css" media="all">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:800px;
	margin:0 auto;
	text-align:center;
}
-->
</style>

reflection.jsを使ってjpg画像に半透明の反転した影を表示させるJavaScriptの記述

※mootools.js、reflection.jsファイルを読み込みます。ページ内のimgタグ（画像）に対して高さ半分（height: 0.5）の影を表示させます。

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="reflection.js"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
	var options = { height: 0.5 };
	$$('img.reflect').each(function(img) {
		img.reflect(options);
	});
});
</script>

画像を反射させ半透明の影を表示させるHTMLの記述

※対象のimgタグ（画像）にJavaScriptで指定したclass（reflect）を指定するだけです。その他は必要に応じて変更して下さい。

<div class="clWrap">
	<h1>1枚のjpg画像を反射させて半透明の影を表示します。</h1>
    <div align="center"><img src="i1.jpg" alt="影を表示させる画像" class="reflect" /></div>
</div>

reflection.js：画像を反射させ半透明の影を反転表示するデモページ

reflection.js：画像を反射させ半透明の影を反転表示するデモ

ソース元：Image Reflection with jQuery and MooTools

ソース元：Image Reflection with jQuery and MooTools

　
少しだけカッコ良くさせたい時に利用出来るかもです。
（始めから影付きの画像を用意して表示させれば良いかもしれませんが）

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。