skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

マウスオーバーで画像をフォーカスする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>

あとは画像を記述すれば完成です。
<amp-img src="画像パス" />
以下画像分


マウスオーバーで画像をフォーカスするJavaScript「Gallery Focus jQuery experiment」サンプル

sponsors

「マウスオーバーで画像をフォーカスするJavaScript「Gallery Focus jQuery experiment」」をシェアする

記事作成:
記事URL:

TOP > > > マウスオーバーで画像をフォーカスするJavaScript「Gallery Focus jQuery experiment」

前の記事:
次の記事:Facebookがスポットでクーポン開始

あなたにはこちもお勧め!

jQuery プラグインまとめ!

JavaScript

read more

Column

read more