[JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector

Post on:2013年6月20日

Googleトレンドのようなグリッド状に配置した複数のパネルにダイナミックなアニメーションを与えるスクリプトを紹介します。

デモのキャプチャ

Dynamic Grid with Transitions

デモはChrome, Firefoxでご覧ください。
※Safariで見たら、クラッシュしました。

3種類のデモは、1:アニメーション無し、2:ディレイ無しのアニメーション、3:ディレイ有りのアニメーションとなっています。

Demo 3のディレイ有りが一番かっこいいです！

デモのアニメーション

Demo 3のアニメーションgif

左上からパネルの表示数・レイアウトが変更すると、アニメーションで変更します。

実装

div要素で配置したパネルと外部ファイルとほんの少しのスクリプトを記述するだけです。

外部ファイル

Modernizrをhead内に、bodyの下の方に当スクリプトとclassie.jsを外部スクリプトとして記述します。

<head>
  ...
  <script src="js/modernizr.custom.js"></script>
</head>
<body>
  ...
  <script src="js/classie.js"></script>
  <script src="js/gridSelector.js"></script>
  <script src="js/grid.js"></script>
</body>

JavaScript

スクリプトでアニメーションの有無、ディレイの有無、スピードを調整できます。

Grid.init( {
    transition : true,
    speed : 450,
    delay: 20
} );

sponsors

top of page

©2024 coliss