写真をミニチュア模型風にするjQueryプラグイン「tiltShift.js」

instagramなどの写真加工アプリでも多い効果で写真をミニチュア模型みたいにするチルトシフトをjQueryプラグインでも簡単にできます。
加工するのが面倒なものでもtiltShift.jsなら一瞬で実現できます。
※Chrome,Safari6のみ対応

sponsors

使用方法

tiltShift.jsからファイル一式をダウンロード。

<link rel="stylesheet" href="jquery.tiltShift.css" />
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.tiltShift.js"></script>
<script type="text/javascript">
$(function(){
     $('.tiltshift').tiltShift();
});
</script>
あとは画像にclassを付与し、効果を設定すればOKです。

<img src="画像パス" class="tiltshift" 
	data-position="66"  //中心点
	data-blur="2"  //ブラー具合
	data-focus="10"  //フォーカス具合
	data-falloff="15"  //ブラーエリア
	data-direction="y"> //方向

サンプル

sponsors


Javascriptサンプルページ一覧
skuare.net