• かちびと.net

    CSS3のFilter Effectsを使って画像にチルトシフト効果を与えるjQueryプラグイン・tiltShift.jsのご紹介です。Filter Effectsで位置を指定してblurさせる事でチルトシフトっぽいエフェクトを作り出します。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

CSS3のFilter Effectsを使って画像にチルトシフト効果を与えるjQueryプラグイン・tiltShift.js

スポンサーリンク

Webkit系で使えるFilter Effectsを
利用して、画像にチルトシフトっぽい
エフェクトを与えられる、という
jQueryのプラグインです。非常に
限られたシーンでしか利用できませ
んがこういう加工がPs不要で出来る
のは素敵ですね。

CSS3+jQueryで実装するチルトシフトエフェクトです。利用シーンは限られものの、ちょっと面白いです。

tiltShift.js


こんな感じのチルトシフト効果をJSとCSSで与える、というもの。デモではマウスを乗せると元画像を確認出来ます。

Sample


サンプルです。ChromeかSafariでご確認下さい。

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript' src="jquery.tiltShift.js"></script>

↑ 本体とプラグインを読み込み。

 $('img.foo').tiltShift();

↑ セレクタはエフェクトをかけたい画像を指定します。

<img src="example.jpg" class="foo" data-position="56" data-blur="2" data-focus="5" data-falloff="15" data-direction="y">

↑ エフェクトの調整は画像ごとにカスタムデータ属性を使ってセッティングします。blurとかfocusとか身近な言葉を使ってくれているので概ね分かりますよね。

ライセンスはGPLとの事です。

tiltShift.js

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services