Instant.jsを使う。(1)

[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>

◆ポラロイド風の表示
今回はこの画像をポラロイド風に表示します。
(久しぶりのオリジナル写真です。いいのが撮れました。)
balloon.jpg

指定方法はGlossy.jsと同様、非常にシンプルです。

<HTML>
<img src="images/sample.jpg" class="instant"/>
ポラロイド風表示をしたい画像に「instant」というクラスを指定するだけ。
このように写真が表示されます。

balloon.jpg
写真をたくさん表示したいページなんかに使うと、デザイン性がぐっとあがりそうです。

オプションのクラスがあるので、
次回以降、オプションクラスを解析していきます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください