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についてでした。以下からダウンロードできます。

CSSで簡単に三角形を作ってくれるChrome拡張機能「CSS三角形作成ツール」前のページ

Macでテキストをコピーした際にプレーンテキストにしてくれるアプリ「FormatMatch」次のページ

関連記事

  1. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

  2. no-image
  3. JavaScript

    ホバーすると中心から円形メニューが表示される「jQuery Wheel Menu」

    ホバーするとその地点を中心にして円形メニューが表示されるプラグイン「j…

  4. Canvi

    JavaScript

    左右からスライド表示するシンプルなナビゲーションメニュー「Canvi」

    CanviはVanilla JSによるシンプルなナビゲーションメニュー…

  5. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  6. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

コメント

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

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

最近の記事

  1. cheero Power Mountain mini 30000mAh CHE-110
  2. 帆布カメラインナーケース B-2タイプ
  3. 雨粒

アーカイブ

PAGE TOP