skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

写真をミニチュア模型風にする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です。
<amp-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」

前の記事:
次の記事:TwitterのEmbedded Timelinesを触ってみた

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more