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

mobily.pl – playground – MobilyBlocks

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

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;
}

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

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

回転アニメーションで表示要素を展開するjQueryプラグイン「MobilyBlocks」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner