[Instant.js]
http://www.netzgesta.de/instant/
画像をポラロイド写真のように表示するJavaScriptライブラリです。
◆ダウンロード
Instant.js>Downloadから[instant.js 1.12]をダウンロードします。
(ダウンロードするファイル名は[instant.zip]です。)
◆Instant.jsをページに取り込む
ダウンロード後[instant.zip]を解凍します。
サンプル画像やサンプルhtmlも同胞されていますが、
実際に自分のページで利用する場合は、instant.jsだけを必要な場所に配置し、
スクリプトを利用したいHTMLに宣言すればOKです。
<script type="text/javascript" src="instant.js"></script>
◆ポラロイド風の表示
今回はこの画像をポラロイド風に表示します。
(久しぶりのオリジナル写真です。いいのが撮れました。)
指定方法はGlossy.jsと同様、非常にシンプルです。
<HTML>
<img src="images/sample.jpg" class="instant"/>
ポラロイド風表示をしたい画像に「instant」というクラスを指定するだけ。
このように写真が表示されます。
写真をたくさん表示したいページなんかに使うと、デザイン性がぐっとあがりそうです。
オプションのクラスがあるので、
次回以降、オプションクラスを解析していきます。