ティルトシフトをCSS3でリアルタイム処理するjQueryプラグイン | ぷらすぶろぐ

写真をジオラマ風に見せることができるティルトシフト。小さく見えて可愛らしいので目を引きますね。 本来はティルトシフトというレンズによって得られるこのエフェクトは、遠近法のパースを補正したりピントが合う範囲を調整できます。 このティルトシフト、フォトショップなどの画像処理で擬似的に同じことが出来るのですが、今回はブラウザだけで再現してしまうjQueryプラグインを紹介します。 プラグイン名はそのものズバリの「tiltShift.js」。パース補正はできませんが、かなり細かく「ぼかし」をコントロールできます。CSS3の中でも特殊なフィルターを使っており対応ブラウザはChrome & Safari 6のみ。まだ実用は厳しいですね。 プラグインの動作としては、ぼかした画像を上下分の２つ作成し、元画像に重ね合わせています。ぼかした画像の作成といってもCSS3のプロパティを追加しているだけなので、JSの仕事は軽いです。 CSS3の今後が楽しみになるプラグインですね(・∀・) tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect photo credits:Stadium ぷらすぶろぐでは、実際に動くサンプルを掲載してWEBテクニックを紹介しています。 映画のハッカーみたいなデザインを再現 JustGage jQueryを使ったPinterestチックな画像一覧表示 jQueryとCSS3で影を極めたプラグイン「Real Shadow」 コピペでサクッと導入できるライブラリ非依存のJavascriptカウントダウン knob JavaScriptで物理法則を制御する「Coffee Physics」 Flash ASで粒子を制御する「Flint Particles」

http://bit.ly/PhNgPC