チルトシフト効果でミニチュア風の写真に仕上げてくれるjQueryプラグイン「tiltShift.js」

指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQueryプラグイン「tiltShift.js」を使ってみました。とても面白いですね。CSS3を使っていてChromeとSafari6で動作します。ちょっと違った写真の見せ方の1つとして覚えておきたいですね。以下使い方です。

使い方

jQuery本体とダウンロードしたプラグインファイルを読み込みます。

<link rel="stylesheet" href="jquery.tiltShift.css">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1'></script>
<script src="jquery.tiltShift.js"></script>
<script>
jQuery(document).ready(function() {
    $('.tiltshift').tiltShift();
});
</script>

画像はdata属性を使ってチルトシフト効果を与える影響の数値を指定していきます。

<img src="sample.jpg" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">

各data属性は次の通りです。

data-position
フォーカスのポイントを決めます。0〜100で、0に近いほど上に、100に近いほど下の位置にフォーカスされます。
data-blur
ブラー量です。通常は1か2が良いそうです。
data-focus
フォーカス領域を指定できます。0〜100で、0に近いほどフォーカス領域が狭く、100に近いほど広くなります。
data-falloff
フォーカスとブラーの間の領域、0〜100の間で指定します。
data-direction
方向を指定します。x、y、0〜360の間のいずれかを指定します。

ということで、チルトシフト効果を与えてくれるtiltShift.jsについてでした。以下からダウンロードできます。

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

Archives