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

スポンサーリンク

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

  1. Reflection.jsのサイトの下のほうにDownload reflection.jsからファイルをダウンロードして解凍。
  2. 解凍したファイルの中から、「reflection.js」をサーバにアップロード。
  3. 画像を表示したいhtmlの<head>から</head>の間に
    <script language="JavaScript" type="text/javascript" src="reflection.js"></script>
    

    と書いて、reflection.jsを読み込みます。

  4. 反射させたい画像(jpg,gif,png)にclass="reflect"を追加する。
    <img src="画像ファイル名" class="reflect" />
    

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

スポンサーリンク

関連サイト

インターネット
スポンサーリンク
スポンサーリンク
この記事をシェアする
ひとぅをフォローする
関係するかもしれない記事
ひとぅブログ