JavaScript

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

指定した画像にチルトシフト効果をプラスしてミニチュア風にしてくれる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についてでした。以下からダウンロードできます。

関連記事

  1. formToWizard

    JavaScript

    ステップごとに入力可能なフォームを実装できる「formToWizard」

    formToWizardはステップごとに(ウィザード)入力可能なフォー…

  2. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  3. infiniteSlider2.js
  4. Zooming

    JavaScript

    クールな画像ズーム機能を実装できる「Zooming」

    Zoomingはクールでかっこいい画像ズーム機能を実装することができる…

  5. no-image
  6. Art Text Light jQuery plugin

    JavaScript

    テキストに光が移動するエフェクトを与えることができる「Art Text Light jQuery p…

    指定したテキストに光が移動するエフェクトを与えることができるjQuer…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

  1. cheero Stream 10000mAh
  2. BOSE HOME SPEAKER 300
  3. RP-PC112
  4. SRS-XB402M
  5. Lite LR30

アーカイブ

PAGE TOP