マウスオーバーした画像をくっきり見せるJavaScript「Gallery Focus jQuery experiment」

マウスを当てたとこの画像だけくっきり見せたいという方にはこちら。
Gallery Focus jQuery experimentを利用するとマウスオーバーした周辺に対して適用されるので、幻想的かつ印象的な画像ギャラリーになりそうです。

sponsors

使用方法

Gallery Focus jQuery experimentからファイル一式をダウンロード。

<script src="jquery-1.6.1.min.js" type="text/javascript"></script>	
<script src="jquery.galleryFocus.js"></script>
<script>
$(document).ready(function(){
	$('img').galleryFocus({
	  'radius': 400, //フォーカスをあてる半径
	  'fadeTo': 0.1, //フェードの割合
	  'invert': false, //trueでマウスオーバーに対しぼかし
	  'overlay': true //overlayした範囲を表示
	});
});
</script>
あとは画像を記述すれば完成です。
<img src="画像パス" /> 以下画像分

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors