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. Lightense Images
  2. no-image
  3. MenuSpy

    JavaScript

    セクションビュー対応のナビゲーションメニュー実装「MenuSpy」

    MenuSpyは、ナビゲーションメニューを作成するためのjsライブラリ…

  4. Auto-Text-Scroll

    JavaScript

    自動でテキストが垂直にスクロールしていく「Auto-Text-Scroll」

    Auto-Text-Scrollは自動でテキストが垂直でスクロールして…

  5. Air Datepicker

    JavaScript

    軽量でクロスブラウザ、モダンブラウザに対応した「Air Datepicker」

    Air Datepickerは軽量でクロスブラウザ、モダンブラウザに対…

  6. Fixit

    JavaScript

    要素を特定の位置に固定できるjQueryプラグイン「Fixit」

    Fixitは要素を特定の位置に固定することができるjQueryプラグイ…

コメント

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

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

最近の記事

  1. ハワイ カウ
  2. ぼんしゃん全部入り
  3. ナイトロコーヒー
  4. チーズベーコンエッグバーガー
PAGE TOP