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がオープンしたりすると
カッコよくなりそうです。

ご参考までに。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner