[JS]さまざまな要素をダイナミックなアニメーションでズームさせるスクリプト -Zoomooz

画像だけでなく、ページ内のさまざまな要素をダイナミックなアニメーションでズームイン・アウト、回転させるjQueryのプラグインを紹介します。

デモのキャプチャ

Zoomooz
デモページ

[ad#ad-2]

スクリプトの動きは、ページ内の最も目立つ赤いパネルをクリックしてみてください。

デモのキャプチャ

デモページ

赤いパネルの傾きが正位置になるよう回転し、ページ全体がダイナミックにアニメーションでズームします。

Zoomoozのデモ

Zoomoozを使った面白いデモが多数公開されています。

アイソメトリック キューブ

デモのキャプチャ

Isometric cube

3Dのキューブで、3面のどれかをクリックするとズームします。

デモのキャプチャ

3Dのキューブで、3面のどれかをクリックするとズームします。

デモのキャプチャ

ちらっと見えてる他の面をクリックすると回転します。

デモのキャプチャ

面にある4つのパネルをクリックすると、更にズームします。

画像ギャラリー

デモのキャプチャ

Flickr image stack

Flickrから呼び出した画像を重ねて表示しています。

デモのキャプチャ

重なっている画像をクリックすると、それを中心にズームします。

Zoomoozの基本的な動きが分かるデモ

デモのキャプチャ

Zooming container demo

さまざまな形状の要素が配置されており、それぞれをクリックするとアニメーションで正位置に回転されズームします。

[ad#ad-2]

Zoomoozの対応ブラウザ

Zoomoozの対応ブラウザは下記の通りです。

  • IE9
  • Firefox3.6+
  • Safari3+
  • Chrome
  • Opera

Zoomoozの実装

Zoomoozをページに実装するには、外部ファイルを指定します。

外部ファイル







top of page

©2018 coliss