[JS]グリッドで配置したパネルをダイナミックなアニメーションでコントロールするスクリプト -gridSelector
Post on:2013年6月20日
sponsors
Googleトレンドのようなグリッド状に配置した複数のパネルにダイナミックなアニメーションを与えるスクリプトを紹介します。
デモは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
