[JS]さまざまな要素をダイナミックなアニメーションでズームさせるスクリプト -Zoomooz
Post on:2011年9月14日
画像だけでなく、ページ内のさまざまな要素をダイナミックなアニメーションでズームイン・アウト、回転させるjQueryのプラグインを紹介します。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091401.png)
[ad#ad-2]
スクリプトの動きは、ページ内の最も目立つ赤いパネルをクリックしてみてください。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091402.png)
赤いパネルの傾きが正位置になるよう回転し、ページ全体がダイナミックにアニメーションでズームします。
Zoomoozのデモ
Zoomoozを使った面白いデモが多数公開されています。
アイソメトリック キューブ
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091403-01.png)
3Dのキューブで、3面のどれかをクリックするとズームします。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091403-02.png)
3Dのキューブで、3面のどれかをクリックするとズームします。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091403-03.png)
ちらっと見えてる他の面をクリックすると回転します。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091403-04.png)
面にある4つのパネルをクリックすると、更にズームします。
画像ギャラリー
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091403-05.png)
Flickrから呼び出した画像を重ねて表示しています。
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091403-06.png)
重なっている画像をクリックすると、それを中心にズームします。
Zoomoozの基本的な動きが分かるデモ
![デモのキャプチャ](/wp-content/uploads-2011-2d/2011091403-07.png)
さまざまな形状の要素が配置されており、それぞれをクリックするとアニメーションで正位置に回転されズームします。
[ad#ad-2]
Zoomoozの対応ブラウザ
Zoomoozの対応ブラウザは下記の通りです。
- IE9
- Firefox3.6+
- Safari3+
- Chrome
- Opera
Zoomoozの実装
Zoomoozをページに実装するには、外部ファイルを指定します。