JavaScript

reflection.jsで画像に魅力的な半透明の反射影を追加する方法

  /

昨今のWeb開発では、ユーザーの注目を集め、サイトに長く留まってもらうために、ビジュアル要素の魅力が非常に重要になっています。そんな中、画像に美しい影を加えることで、サイトの見た目を格段に向上させることができます。
この記事では、JavaScriptのライブラリであるreflection.jsを使用して、画像に半透明の反転した影を表示させる方法を紹介します。

Contents

CSSでの準備

まず初めに、画像を美しく表示させるための基本的なCSSを設定しましょう。ここでは、サイト全体のマージンやパディングを0に設定し、見出しや画像を中央揃えにします。特に、clWrapクラスを使って画像を中央に配置する方法を紹介します。

<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>

　
このCSSは、サイトのベースとなるスタイルを提供します。次に、JavaScriptを用いて画像に反転した影を加える処理に移ります。

JavaScriptでの画像反射効果

mootools.js、reflection.jsファイルを読み込みます。reflection.jsを使用する前に、依存関係となるmootools.jsを読み込む必要があります。これらのライブラリを利用することで、簡単に画像に反転した影を追加できます。

<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>

　
ページ内のimgタグ（画像）に対して高さ半分（height: 0.5）の影を表示させます。
ここでは、ページ内の全てのimg.reflectクラスを持つ画像に対して、高さの半分の大きさの影を加えています。optionsオブジェクトを通じて、反転影の高さをカスタマイズすることが可能です。

HTMLでの画像反映

JavaScriptで定義したクラスreflectを適用したい画像に指定することで、効果を適用させます。以下はその例です。

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

　
対象のimgタグ（画像）にJavaScriptで指定したclass（reflect）を指定するだけです。
このコードスニペットでは、clWrapクラスを持つdiv内に、reflectクラスを適用した画像を配置しています。これにより、指定した画像に自動的に反転した影が加わります。

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

reflection.jsを実際にどのように使用するかについては、デモページを参照してください。また、この技術を応用することで、ポートフォリオサイトや商品画像をより魅力的に見せることが可能です。注意点としては、影を加えることでページの読み込み時間がわずかに増加する可能性があるため、使用する画像の数やサイズには注意しましょう。

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

ソース元：Image Reflection with jQuery and MooTools

ソース元：Image Reflection with jQuery and MooTools

まとめ

Webサイトのビジュアル要素は、ユーザーの興味を引きつける上で非常に重要です。reflection.jsを利用することで、簡単に画像に美しい反転した影を加えることができ、サイトの見た目を格段に向上させることが可能になります。この記事が、あなたのWeb開発におけるビジュアルデザインの一助となれば幸いです。

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

影 reflection.js 反射
関連記事