[JS]ダイナミックなアニメーションでページをまるごとズームできるスクリプト -zoom.js

ページ上のあらゆるエレメントをダイナミックなアニメーションでズームするスクリプトを紹介します。

zoom.js -GitHub
デモページ

[ad#ad-2]

• デモ
• 実装

デモ

デモページではページ上のどのエレメントをクリックしてもズームイン（拡大）します。

グリーンの「Float」をクリックするとこんな感じになります。

デモページ：ズームインしたキャプチャ

ズームアウト（縮小）するにはもう一度クリックするか、[ESC]キーを押します。

[ad#ad-2]

実装

「zoom.js」はjQueryなどの他のスクリプトには依存せずに、単体で実装が可能です。

外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="js/zoom.js"></script>

HTML/CSS

HTMLとCSSは通常通りで構いません。
特定のエリアに適用する場合は、そのエリアが指定できるようにidなどを設けます。

JavaScript

特定の要素（例：img）のみ適用する場合は下記のようになります。

  zoom.in({ 
    element: document.querySelector( 'img' ) 
  });

デモページのように特定のエリア（例：#main）のみ適用する場合は下記のようになります。

  document.querySelector( '#main' ).addEventListener( 'click', function( event ) {
    event.preventDefault();
    zoom.in( { element: event.target } );
  } );