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. ShowMore.js

    JavaScript

    長いコンテンツを折りたためるjQueryプラグイン「ShowMore.js」

    ShowMore.jsは長いコンテンツを折りたたんで表示・非表示を簡単…

  2. jQuery Stick ‘em

    JavaScript

    スクロール時にその場所のコンテンツに応じたサイドバーが追従する「jQuery Stick ‘em」

    ちょっと使いどころがありそうなプラグインだったので使い方をメモしときま…

  3. jQuery Floating Social Share
  4. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  5. Responsive 3d Fold Scroll
  6. Optiscroll

    JavaScript

    縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

    Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れた…

コメント

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

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

最近の記事

  1. CAR-HLD12BK
  2. OWL-LPB6701LA
  3. cheero Power Mountain mini 30000mAh CHE-110

アーカイブ

PAGE TOP