REDLINE MAGAZINE | Reflection.jsで楽に画像を反射させるREDLINE MAGAZINEトップページへ

すべてのエントリを見る

Reflection.jsで楽に画像を反射させる

最近よく画像を反射させてる感じの画像を見かける。
1つ1つ画像編集ソフトでリフレクトさせてもいいんだけど、数が多い時は大変だし、もしかしたら途中でページの背景色が変わるかもしれない時に作りなおしは避けたいなーと言う時に便利かもと思ったjavascript。

>>Reflection.js ( http://cow.neondragon.net/stuff/reflection/)

使い方はすごく簡単。head内でjsを読み込んで、後は反射のエフェクトをかけたい画像に『class="reflect"』を指定するだけ。自動で背景色に溶け込ませてくれるので、後から背景色を変更した場合もOK。(透過画像なんかを使ってる時は当然エッジがアレなんだけど)

デフォルトの状態の反射の様子

『class="reflect"』を指定しただけの場合・・・

  • 反射の高さは元画像の50%の高さ
  • 従って該当画像の高さは元画像の1.5倍になる。
  • 反射の不透明度は50%

カスタマイズも簡単

  • 反射の高さ変更可能。『rheight●●(パーセント)』を追加指定。
  • 不透明度変更可能。『ropacity●●(パーセント)』を追加指定。
  • 上記2つを組み合わせ可能。『rheight●● ropacity●●』を追加指定。

反射の高さについては特に大きい写真には小さな反射(10%)が作者の方はおすすめのようです。(そう書いてあった)

ということで・・・ >>サンプルページで試したみた。
上の箇条書きにした部分のソースがいまいちわかんない方はこっちのサンプルページのソースで確認してくださいまし。

またLightboxなどのスクリプトと組み合わせて使う事ができるので用途はすごく広がりそう。その辺りはjsファイルをDLした時に同梱されてたhtmlファイルにいろいろ記載されてました。

対応ブラウザ

  • Internet Explorer 5.5+
  • Mozilla Firefox 1.5+
  • Opera 9+
  • Safari 2

※js無効のブラウザで見た場合は当然反射のエフェクトはかからない。でも画像自体は存在してるし、ユーザーに情報が伝わらないってわけではないので、実用的だなーと思った。

<< YUIライブラリでタブ切替 | script.aculo.us でアニメーション >>

トラックバック

このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/130

このページの一番上へ

その他の情報など

最近のコメント

PHP オブジェクト指向の勉強
  • Red - 2010.01.08
  • hogepage - 2010.01.21
  • Red - 2010.01.22
  • - 2011.11.27
  • houseiii - 2011.11.27
Fireworks トリミング画像を一括書出 CS4編
  • Iper - 2009.06.27
  • Red - 2009.06.27
  • mala - 2011.11.17
  • Red - 2011.11.18
jQueryでボックスを上下左右中央に簡単配置
overflow を使用したボックス背景のこと
  • - 2007.12.13
  • Red - 2007.12.13
  • - 2007.12.13
  • Red - 2007.12.13
  • hj - 2011.09.23
IE6 → 透過PNG+overflow=混ぜるな危険(追記有)

メッセージを送る

こちらのメッセージ送信フォームは閉鎖させて頂きました。
御用の方は新しい方のブログ にコメント頂くか、 連絡用のフォーム もありますので、そちらからご連絡ください。