WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

jQueryでの画像拡大エフェクト効果「jquery-puffy.js」

jQueryでマウスClickやマウスHoverで可能な演出はいくつか紹介していますが、
画像に対して飛び出すようなエフェクトを付けることが可能な「jquery-puffy.js」もちょっとおもしろそうです。

jQueryPuffy.jpg
nao58/jquery-puffy @ GitHub

使い方はいつも通り、大元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がオープンしたりすると
カッコよくなりそうです。

ご参考までに。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です