水面に反射したようなロゴを再現する

▼ 2008/01/18(金) 水面に反射したようなロゴを再現する

Web2.0的サイトのロゴって、水面に映ったようなおしゃれなものが多いですが、“アレ”をJavascriptで簡単に実現できます。
GIGAZINEさんのサイトや、designwalkerさんのサイトで紹介されていました。

Reflection.jsのサイトの下のほうにDownload reflection.jsからファイルをダウンロードして解凍。
解凍したファイルの中から、「reflection.js」をサーバにアップロード。
画像を表示したいhtmlの<head>から</head>の間に
```
<script language="JavaScript" type="text/javascript" src="reflection.js"></script>
```
と書いて、reflection.jsを読み込みます。
反射させたい画像(jpg,gif,png)にclass="reflect"を追加する。
```
<img src="画像ファイル名" class="reflect" />
```

これで、かっこいい写り込み画像が表示されます。
グラフィックソフトで編集すれば簡単に実現できますが、このスクリプトを使えば都度画像を加工しなくていいので便利ですね。
（マクドナルドのクーポンもこうして反射させるとカッコイイ！(*^_^*)）

# NonO_ 2008年01月19日(土) 午後8時46分

早速参考にさせてもらいましたヾ(ﾟωﾟ)ﾉ゛
TBは一個多かったですorz

# ひとぅ 2008年01月20日(日) 午前8時05分

コメント＆TBありがとうございます。
（2回目のTBは削除させていただきました。）
いろいろ面白いサービスや技術があるもんんですよね。
早速、実験いただいてありがとうございます<(_ _)>。

TB-URL http://hitoxu.com/0117/tb/
▼ Reflection導入してみる殴りふぉ○日誌 |Д`)ノ⌒After…” nonoya
ひとぅさんところで面白そうなのあったので早速導入こんな感じに左が(補正なし)で右は(補正あり)下に影が付く感じだ最近こんな画像多いから入れて見てもいいんじゃないでしょうか？□参考ひとぅブログ公式Design Walker■仕込み+[http://cow.n...