ティルトシフト.js

tiltShift.js は、CSS3 画像フィルターを使用して写真のチルトシフト効果を実現する優れた jQuery プラグインです。使い方は非常に簡単で、データ属性を使用してパラメータを設定します。注意: 最良の結果を得るには、IE10 以降、Chrome、Firefox、Safari などの最新のブラウザで閲覧してください。

Effect Demonstration Plug-in Download

HTMLの例:

<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">

-position (0-100)、フォーカスポイントの位置を定義します。

-blur (0 - ?)、ぼかし半径。 1 または 2 に設定することがより適切です。

-focus (0-100)、フォーカスエリアのサイズ。

-falloff (0-100)、完全焦点と完全ブラーの間の領域のサイズ。

-direction (「x」、「y」、または 0-360)、方向。

JavaScript呼び出し例:

$(function() {     $('.tiltshift').tiltShift();});