ウェブディレクション ユーザビリティ SEO アクセス解析 デザイン制作 システム webapi使い方サンプル 見本になるサイト

ajaxで簡単に画像の反射効果がつくれる『reflection.js』

画像の反射効果を簡単につくれる、Ajaxの紹介です。

非常に簡単に、下記のような反射効果のついた画像をつくる事ができます。

必要なjsファイルを1つ読み込んで、imgタグに「class="reflect"」と設定するだけ、という簡単さです。



【『reflection.js』をつかって画像に反射効果をつけたサンプルページはこちら】


【手順1】『reflection.js』をダウンロード


こちらのサイト
http://cow.neondragon.net/stuff/reflection/
から『reflection.js』をダウンロードしてください。(英語サイトです)

*2011年現在の状態だと「Download the latest version, Reflection.js v2.0.」と書かれたところをクリックすれば、ダウンロードできます。

ダウンロードすると、色々なファイルがはいってますが、基本的に必要なのは『reflection.js』のみですから、それだけ取り出してください。

【手順2】あたなのつくるページにファイルをいれて、HTMLから読み込む


あなたの作成するページのフォルダに『reflection.js』をいれて、

HTMLのヘッダーに『reflection.js』を読み込む

---------------------

<scripttype="text/javascript" src="階層を記述してね/reflection.js"></script>

---------------------

を記載してください。

そして、反射効果を出したい画像の「imgタグ」に「class="reflect"」と記述してください。

例えば下記のような感じです

---------------------

<imgsrc="photo/001.jpg" class="reflect" >

---------------------

以上で、画像が反射されるはずです。


反射の長さをカスタマイズしたい場合


サンプルにあるように
反射させる画像の長さを調整する事ができます。

サンプルのHTMLをみてもらうと解ると思いますが「class」に「rheight」という記述がありますよね。
そして、その後ろに数字がついています。「rheight10」とか。

---------------------

<imgsrc="photo/001.jpg" class="reflect rheight10" >
<img src="photo/002.jpg" class="reflect rheight50" > <img src="photo/003.jpg" class="reflect rheight100" >

---------------------

この「rheight」後ろの数字が、縦の長さを表していますので、数字が大きい方が長くなり、数字が小さいと短くなります。

こちらで反射の長さを調整することができます。

フォトショップなどでいちいち反射をつくるのがめんどうな場合は、とても便利な代物ですね。




Yahoo!ブックマークに登録     
このエントリーをはてなブックマークに追加

無料素材イラストダウンロード
今週のピッアップ記事
ウェブディレクターズスタッフブログ

メルマガ購読・解除
 
webディレクターズリンク集