jQueryでマウスClickやマウスHoverで可能な演出はいくつか紹介していますが、
画像に対して飛び出すようなエフェクトを付けることが可能な「jquery-puffy.js」もちょっとおもしろそうです。
使い方はいつも通り、大元jQueryファイルと
上記ページからダウンロードできる「jquery-puffy.js」を
ページ上に読み込ませます。
別途必要なSCRIPTは以下の様な感じで記述するだけ。
————————————–
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#action01’).click(function(){$(this).puffy();});
$(‘#action02’).click(function(){$(this).puffy({duration: 1500});});
$(‘#action03’).click(function(){$(this).puffy({callback: function(){
$(this).attr(‘src’, ‘img/photo03_2.jpg’);
}});});
$(‘#action04’).mouseover(function(){$(this).puffy();});
});
</script>
————————————–
これを使うと画像をClickもしくはHoverで
画像が飛び出してくるようなエフェクトが可能になり、
ちょっと今までとは違った感じの演出が加えられそうです。
サンプルは以下(画像を適当クリックしてみてください。)
画像に対してというより、
ボタンクリックでこの効果を付けて、Thickboxがオープンしたりすると
カッコよくなりそうです。
ご参考までに。。。