写真にポラロイドデザインのエフェクトを適用するJavaScript (Instant.js)

2007年6月17日(日) 08:50

Instant.js
JavaScriptだけで、Polaroid™写真のようにエフェクトをかける事ができるのがInstant.js。適度な傾きと、ドロップシャドウなどを写真に適用してくれる。影のつき方などのセンスが良く、簡単にコンテンツのセンスアップができる。

内部的にはCanvasを利用している。実際に導入するにはHTMLヘッダでInstant.jsを呼び出しておく。ポラロイド効果を適用したいイメージタグに class="instant" を記述すれば適用される。

表示オプションはclassに記述
instant.jsの適用と、オプションの指定はすべて<img class=".."に追加すればよい。ドロップシャドウの透過度、フレームの色、写真の傾き方向 などを指定することができる。

写真の傾き(Tilt)は指定が無い場合、自動的に left、none、right 順番で適用される。

Internet ExplorerはVML仕様で対応している。Canvasが利用できないブラウザ環境では利用することができないので、注意していただきたい。

さくらインターネット

関連する記事