2008年11月25日

Reflection.jsがGoogle Chromeに対応

Reflection.jsがGoogle Chromeに対応

Photobucket
先日から始めたこのブログ、
デザインなどをチョボチョボいじっていましたが、
今日は、画像にリフレクションをかけられるJavaScliptを入れてみようと思い
どれにしよっかな〜といろいろ試していたのですが、
結構Google Chromeで見た時に、なんか失敗してるカンジなのよね〜
しかし、あのメジャーなヤツがオッケーでした☆


簡単に画像に反射(Reflection)効果をかけられる、なんともナイスな
Reflection.jsのバージョンが2.0になり、
Google Chromeに対応している!


Reflection.js 2.0
    Please update to Reflection.js version 2.0 for Google Chrome support.
ってバッチリ書いてある
http://cow.neondragon.net/stuff/reflection/

よーし、やってみよう!
まずはReflection.js 2.0
http://cow.neondragon.net/stuff/reflection/

DownloadのトコからZIPファイルをありがたく頂戴してくる。
中に入っているreflection.jsをアップロード。
そして、下記のように読み込む。(Seesaaブログの場合は、デザイン⇒HTMLの</HEAD>の前ね)
<script type="text/javascript" src="読み込むreflection.jsの場所"></script>
次に画像の<img src="□□□"/>『/>』の前
class="reflect"
を追加してあげる。
これで終わり。
なんて簡単にできるのよ! むっふ〜★


デフォルトでは、反射部分が
元画像の50%の高さ
不透明度は50%

となっていますが、

高さの変更は
class="reflect rheight○○"
と、○○部分に%パーセンテージを指定


不透明度の変更は
class="reflect ropacity○○"
と、○○部分に%パーセンテージを指定


もちろん両方組み合わせて、
class="rheight○○ ropacity○○"
とすることも可能なの。



他に同じようなエフェクトがかけられるJS

Bevel.js 1.2
http://www.netzgesta.de/bevel/


reflex.js 1.2
http://www.netzgesta.de/reflex/

は、うちのGoogle Chromeで見ると、
どちらもまだ良くないカンジです。

----------
Reflection.jsの古いバージョンのご参考

RedLine Magazine
2007年03月31日 23:25
Reflection.jsで楽に画像を反射させる

http://redline.hippy.jp/lab/misc/reflectionjs.php


GIGAZINE
2006年05月29日 01時01分00秒
水面に反射するような効果を画像に加える
JavaScript「Reflection.js」

http://gigazine.net/index.php?/news/comments/20060529_reflectionjs/



posted by ilm at 19:15 | Comment(0) | TrackBack(0) | DIARY | このブログの読者になる | 更新情報をチェックする

CoRichブログランキングブログランキング・にほんブログ村へ 人気ブログランキング【ブログの殿堂】 人気ブログランキングへ ブログランキング【くつろぐ】


この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/110181474

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。