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

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

画像を鏡面反射させる 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版(最適版らしい)をダウンロードして

内に以下を記入(v1.2.3の場合)。

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

Reflect jQuery プラグインの導入

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

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

のように、img の class に reflect と rheight(反射した画像の高さ)、ropacity(反射した画像の透明度)を指定する Reflection.js と同じ使い方をするならば、jquery.reflect.js の18行目(v1.00)、inline: false を inline: true に変更する。

そして、以下を

内に以下を記入。

$(document).ready(function() {
....
    $('img.reflect').reflect();
....
});

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

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

参考・参照

jQuery 公式サイト: jQuery: The Write Less, Do More, JavaScript Library

Reflect jQuery : Reflect jQuery | jQuery Plugins

jQuery1.2.3日本語リファレンス