buffer: Instant.js

2008年8月17日日曜日

Instant.js

0.Instant.jsって
画像をフォトフレームに入れて表示したように見せることができます。
フレームの色や傾きなど指定できます。

1.download
http://www.netzgesta.de/instant/
内の下の方に移動するとDowloadという折りたたみ式のメニュー
があるのでクリックするとリンクが出てきます。

(なにげに、一番上のinstant.jsってロゴをクリックしてもダウンロードできますねぇ。)

2.使い方
ファイル構成が下記の場合で説明します。

index.html
┣ js
┃ ┗ instant.js
┗ pic
   ┣ image-1.jpg
   ┣ image-2.jpg
   ┣ image-3.jpg
   ┣ image-4.jpg
   ┣ image-5.jpg
   ┗ image-6.jpg

まず、javascriptのファイルを指定をします。

<script type="text/javascript" src="./js/instant.js"></script>

あとは、imgタグに class="instant" を追加するだけです。
例）

<img src="http://www.blogger.com/pic/image-1.jpg" class="instant" />
<img src="http://www.blogger.com/pic/image-2.jpg" class="instant" />
<img src="http://www.blogger.com/pic/image-3.jpg" class="instant" />

デフォルトだと、フレームが白で傾きが
左下がり、平行、右下がりの繰り返しになります。

ちなみに、class名を変えることで下記の効果が得られます。
◇傾き
"instant" → "instant itiltnone" ⇒ 画像を傾けない。
"instant" → "instant itiltleft" ⇒ 左下がり
"instant" → "instant itiltright" ⇒ 右下がり

◇写真フレームの影
下記のようにshadowの後に0(薄い)～100(濃い)を
追加することで写真フレームの影の濃さを変更できます。
"instant" → "instant ishadow50"

◇フォトフレームの色
下記のようにicolorの後に色を指定することで
フォトフレームの色を変えることができます。
"instant" → "instant icolor1038C6"

上の３つを混合し、全て右上がりでフレームカラーを
googleちっくにして一番左だけ影を濃くするにはこんな
コードになります。

<img src="http://www.blogger.com/pic/image-1.jpg"
                                       class="instant itiltleft ishadow100 icolor1038C6" />
<img src="http://www.blogger.com/pic/image-2.jpg" class="instant itiltleft icolorCE1800" />
<img src="http://www.blogger.com/pic/image-3.jpg" class="instant itiltleft icolorFFCF00" />
<img src="http://www.blogger.com/pic/image-4.jpg"
                                       class="instant itiltleft ishadow100 icolor1038C6" />
<img src="http://www.blogger.com/pic/image-5.jpg" class="instant itiltleft icolor4ACB4A" />
<img src="http://www.blogger.com/pic/image-6.jpg" class="instant itiltleft icolorCE1800" />