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

rui_mashita — Sun, 04 May 2008 19:14:10 +0000

画像を鏡面反射させる 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日本語リファレンス

jQuery使ってみた

rui_mashita — Fri, 30 Nov 2007 10:00:03 +0000

indexページと各記事の中段、フッターの水平アコーディオンにjQueryを使ってみた。

indexと各記事の中段は、マウスオーバーで一秒かけて不透明度をあげるようにしてる。フッターの水平アコーディオンは、haccordionってプラグインをすこし改変して使った。

jQueryは思ってたより簡単に入門できたし、プラグインも豊富。日本語解説も結構ある。

jQuery入門解説