指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれるjQueryプラグイン「tiltShift.js」を使ってみました。とても面白いですね。CSS3を使っていてChromeとSafari6で動作します。ちょっと違った写真の見せ方の1つとして覚えておきたいですね。以下使い方です。
[ads_center]
使い方
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についてでした。以下からダウンロードできます。
