[JS]かわいい猫画像になごんでしまった、指定範囲をフォーカスするスクリプト -Gallery Focus

かわいい猫の画像を複数配置したギャラリーの指定箇所を中心にアニメーションでフォーカスするjQueryのプラグインを紹介します。

Gallery Focus
デモページ

[ad#ad-2]

Gallery Focusを使用すると、マウスの操作にあわせて指定した範囲外をフェードでぼやけさせ、好みの猫画像を集中して見ることができます。

オプションでオーバーレイを適用して、適用範囲を表示したキャプチャ

フェードの量、範囲のサイズも指定できます。

オプションもリアルタイムに適用

Gallery Focusの実装

HTML

フォーカスを与える画像を「#gallery」で内包します。
「#gallery」はjQueryのセレクタで指定できるものであれば、何でも可です。

<div id="gallery">
	<img src="images/01.jpg">
	<img src="images/02.jpg">
	...
	...
</div>

JavaScript

「jquery.js」と当スクリプトを外部スクリプトとして指定し、下記のスクリプトを記述します。

$('#gallery img').galleryFocus();

スクリプトのオプション

オプションでは、範囲のサイズ、フェードの量、適用範囲、反転、オーバーレイの有無を指定できます。

$('#gallery img').galleryFocus({
  'radius': 800,
  'fadeTo': 0.0,
  'source': '#source-div',
  'invert': true,
  'overlay': true
});

Gallery Focusのダウンロード

スクリプトのダウンロードは、下記ページよりどうぞ。

• galleryFocus -GitHub

[ad#ad-2]