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

画像の拡大表示をページ全体がズームアップするエフェクトで演出するjQueryプラグイン「Create an Awesome Zooming Web Page With jQuery」

Webページ上で画像を拡大表示する際、単純にサイズの大きな画像をポップアップで表示したり
モーダルウィンドウを使って大きく表示したり、やり方はいろいろありますが、
ページ全体がクリックされたエリア(画像)に対してズームアップしていく演出で
画像などの拡大表示演出を加えられるjQueryプラグイン
「Create an Awesome Zooming Web Page With jQuery」がおもしろかったのでご紹介。

Create an Awesome Zooming Web Page With jQuery


Create an Awesome Zooming Web Page With jQuery | Design Shack


デモはこちら:Zooming Gallery

画面上のサムネイルをクリックすると、
その要素に向かって画面がズームアップします。

ズームアップ後はエリア外をクリックすることで
元の状態に戻ります。

実装もさほど難しくなく、
基本的には必要なプラグインファイルをHTMLから読み込んで、

[html]
◆HTML

Zooming Test





[/html]

クリックする対象要素に
スクリプト実行の記述をするだけの様です。

[javascript]
◆SCRIPT
$(document).ready(function() {
$(“.zoom”).click(function(evt) {
evt.stopPropagation();
$(this).zoomTo();
});
$(window).click(function(evt) {
evt.stopPropagation();
$(“body”).zoomTo();
});
$(“body”).zoomTo();
});
[/javascript]
Zooming Test

ダイナミックにコンテンツ全体を演出できるので
どこかで使ってみたいプラグインです。

ご参考までに。。。

コメントを残す

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