TAGS :,

ボタンをクリックすることでドロップダウンに近い要領で
隠れているコンテンツ要素をフェード付きの回転アニメーションで
展開させるjQueryプラグイン「MobilyBlocks」の動きがおもしろかったのでご紹介。

≫mobily.pl – playground – MobilyBlocks

DEMO動作は下記から。
（それぞれ２つの丸いボタンをクリックしてみてください。）

MobilyBlocks

ボタンをクリックすると下層コンテンツ要素が
回転しながら現れます。
何気ない動きですが何か気持ちがいい動きでもあります。

組み込みもさほど難しく、プラグインファイルと
下記のコード（サンプル）にて実装することが可能になります。

◆SCRIPT
$('.blocks').mobilyblocks({
	animateTime: 500, // duration of animation
	zIndex: 50, // z-index value
	widthMultiplier: 1.15
});
◆HTML
<div class="blocks">
	<ul class="reset">
		<li> .. </li>
		<li> .. </li>
		<li> .. </li>
		<!-- etc. -->
	</ul>
</div> 

◆CSS
.blocks {
	display:block;
	width:;
	height:; /* you need to specify width and height values */
	position:relative;
	cursor:pointer;
}
ul.reset,
ul.reset li {
	display:block;
	list-style:none;
	padding:0;
	margin:0;
}
ul.reset li {
	position:absolute;
}

サイトに組み込むことで、
ちょっと変わった印象を与えてくれそうです。