写真にポラロイドデザインのエフェクトを適用するJavaScript (Instant.js)
2007年6月17日(日) 08:50
JavaScriptだけで、Polaroid™写真のようにエフェクトをかける事ができるのがInstant.js。適度な傾きと、ドロップシャドウなどを写真に適用してくれる。影のつき方などのセンスが良く、簡単にコンテンツのセンスアップができる。
内部的にはCanvasを利用している。実際に導入するにはHTMLヘッダでInstant.jsを呼び出しておく。ポラロイド効果を適用したいイメージタグに class="instant" を記述すれば適用される。

表示オプションはclassに記述
instant.jsの適用と、オプションの指定はすべて<img class=".."に追加すればよい。ドロップシャドウの透過度、フレームの色、写真の傾き方向 などを指定することができる。
写真の傾き(Tilt)は指定が無い場合、自動的に left、none、right 順番で適用される。
Internet ExplorerはVML仕様で対応している。Canvasが利用できないブラウザ環境では利用することができないので、注意していただきたい。
関連する記事
- デザインが魅力的なスライドショーJavaScript (Lightview)
- 楽にフォーム入力チェックを実装するJavaScript (JSValidate)
- CSSデザインレイアウトをオンラインで簡単に作成する (YAML)
- ユーザーが再配置可能なWedgetを実装するJavaScript (Prototype Portal Class)
- フォームボタンCSSデザインするテクニック (Rediscovering Button Element)
- 半透明の角まるツールチップを表示するJavaScript (CoolTips)
- JavaScriptでプログレスバーを簡単に実装する (jsProgressBarHandler)
- JavaScriptコード圧縮して盗用から守る (packer)
- iTuneのようにカバーアートを表示するFlash (iTunes Coverflow)
- 画像をサムネイルのサイズで表示するJavaScript (jQuery Thumbs)
- Ajaxでサクサク動くWebファイルマネージャ (Relay)
- アンカータグを利用してスムーススクロールを実装する (df Smooth Scroll)
- MacでもFlashでホイール操作が出来るようにする (SWFMacMouseWheel)
- HTMLなどタグ編集を楽にするエディタ機能JavaScript (jTagEditor)
- 使いやすいYUIライブラリのWYSIWYGエディタ (Rich Text Editor)
- フォトショップで作る80種類のテキストエフェクト集 (photoshoproadmap.com)
- Flashで便利なTweenクラスのわかりやすい解説 (Tween Class Easing)
- CSSレイアウト情報をレイヤー表示するブックマーク (XRAY)
- Lightboxのような透過レイヤー表示の実装サンプル (Lightbox Effect)
- CSSデザインで綺麗なボタンを作成する (How to make sexy buttons with CSS)

