ティルトシフトをCSS3でリアルタイム処理するjQueryプラグイン

写真をジオラマ風に見せることができるティルトシフト。小さく見えて可愛らしいので目を引きますね。

本来はティルトシフトというレンズによって得られるこのエフェクトは、遠近法のパースを補正したりピントが合う範囲を調整できます。

このティルトシフト、フォトショップなどの画像処理で擬似的に同じことが出来るのですが、今回はブラウザだけで再現してしまうjQueryプラグインを紹介します。

スポンサーリンク

プラグイン名はそのものズバリの「tiltShift.js」。パース補正はできませんが、かなり細かく「ぼかし」をコントロールできます。CSS3の中でも特殊なフィルターを使っており対応ブラウザはChrome & Safari 6のみ。まだ実用は厳しいですね。

プラグインの動作としては、ぼかした画像を上下分の2つ作成し、元画像に重ね合わせています。ぼかした画像の作成といってもCSS3のプロパティを追加しているだけなので、JSの仕事は軽いです。

CSS3の今後が楽しみになるプラグインですね(・∀・)

tiltShift.js – a jQuery plugin using CSS3 filters to replicate the tilt shift effect

photo credits:Stadium

ぷらすぶろぐでは、実際に動くサンプルを掲載してWEBテクニックを紹介しています。

 

 

 

スポンサーリンク