画像を鏡面反射させる jQuery プラグイン「Reflect jQuery」

2008.05.05

画像を鏡面反射させる jQuery プラグイン「Reflect jQuery」を導入しました。ご存知のとおり、jQuery は様々な効果の豊富なプラグインを簡単に導入出来る、有名な javascripts ライブラリ。

Reflect jQuery は、画像が鏡や水面に写ったかのような効果を与える javascripts、Reflection.js に変更を若干加えた jQuery の plugin です。

水面反射画像の例

Reflect jQuery の使い方

Reflect jQuery の使い方は Reflection.js とほぼ同じなので、乗り換えるのは簡単。jQuery と Reflection.js を両方使ってる方は、乗り換えた方が javascripts の処理がちょっとだけ早くなってよいかも。Reflection.js を Wordpress に導入する、WP Wetfloor を使ってる方もご参考に。

jQuery v1.2.3 、Reflect jQuery v1.00 での導入例です。

jQuery 本体の導入

jQueryのサイトから、Minified版（最適版らしい）をダウンロードして<head></head>内に以下を記入（v1.2.3の場合）。

<script type="text/javascript" src="path/to/jquery-1.2.3.min.js"></script>

ここを参照するといいかも。
jQueryを使い始めるには – jQuery1.2.3日本語リファレンス

Reflect jQuery プラグインの導入

jQuery 本体を導入したら、次は Reflect プラグインの導入。

Reflect jQuery のダウンロードはこちら：Reflect jQuery | jQuery Plugins

<img src="something.jpg" class="reflect rheight30 ropacity60" />のように、img の class に reflect と rheight（反射した画像の高さ）、ropacity（反射した画像の透明度）を指定する Reflection.js と同じ使い方をするならば、jquery.reflect.js の18行目（v1.00）、inline: false を inline: true に変更する。

そして、以下を<head></head>内に以下を記入。



<script type="text/javascript" src="path/to/jquery.reflect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
....
    $('img.reflect').reflect();
....
});
</script>

これで、Reflect jQuery プラグインが動きます。あとは、反射させたい画像の class に上記のように、reflect rheight ropacity を指定してやりれば、画像が鏡面反射されます。

jQuery のプラグイン導入は簡単で、上記のようにプラグインのパスを書いて、$(document).ready(function() { });の中に何行かコードを追加するだけで、リッチなデザイン効果を追加出来るものが多いです。