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

この記事がおもしろかったらシェアしてね


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" />
    

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

スポンサーリンク

関連サイト

スポンサーリンク
この記事をお届けした
ひとぅブログの最新ニュース情報を、
いいねしてチェックしよう!

この記事がおもしろかったらシェアしてね

ひとぅに興味を持った方はフォローしてね

関連記事

この記事に関連するオススメ


コメント

  1. 殴りふぉ○日誌 |Д`)ノ⌒After…” より:

    Reflection導入してみる

  2. NonO_ より:

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

  3. ひとぅ より:

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

Highslide for Wordpress Plugin