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

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

デモのキャプチャ

zoom.js -GitHub
デモページ

デモ

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

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

デモのキャプチャ

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

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

実装

「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 } );
  } );

top of page

©2017 coliss