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

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

使用方法 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"> //方向

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

sponsors

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

記事作成:
記事URL:

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