img01

img02

img03

img04

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.tiltShift.js"></script>
<script>
	$(window).load(function(){
		$('.tiltshift').tiltShift();
	});
</script>
<p><img src="<PATH>/img01.jpg" class="tiltshift" data-position="55" data-blur="1" data-focus="15" data-falloff="10" data-direction="y" alt="img01"></p>
<p><img src="<PATH>/img03.jpg" class="tiltshift" data-position="55" data-blur="1" data-focus="15" data-falloff="10" data-direction="y" alt="img02"></p>
<p><img src="<PATH>/img10.jpg" class="tiltshift" data-position="55" data-blur="1" data-focus="15" data-falloff="10" data-direction="y" alt="img03"></p>
<p><img src="<PATH>/img14.jpg" class="tiltshift" data-position="55" data-blur="1" data-focus="15" data-falloff="10" data-direction="y" alt="img04"></p>

tiltShiftについて

tiltShiftは、画像にミニチュア風に見えるエフェクトをかけられるプラグインです。
なかなかおもしろプラグインです。
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスGPL
対応ブラウザ

関連するjQueryプラグイン

  • jPolaroid

    jPolaroid

    普通の画像にポラロイド風の装飾をしてくれる

  • SPOILERALERT

    SPOILERALERT

    、画像や文字をぼかしたりマウスオーバーやクリックでそのぼかしを解除したりできる

  • galleryFocus

    galleryFocus

    マウスオーバーした部分の画像周辺のみをはっきりと表示させる

  • lake

    lake

    canvasタグを利用して景色を反射した湖面を再現

  • puffy

    puffy

    画像が飛び出すようなアニメーションを付けることができる