まんなか

マウスオーバーしてごらんなさい

左だ!

left

さらに左だ

more left

右だ!

right

さらに右だ!

more right

下だ!

bottom

さらに下だ!

more bottom

このプラグインの実際の動きを確認したい場合は、PCからアクセスして下さい。

  • files
  • js
  • html
<link href="<PATH>/flipout_cards.css" rel="stylesheet" />
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.flipout_cards.min.js"></script>
<script>
    $(window).load(function(){
		$('#FlipOutCardsDemo').flipout_cards();
    });
</script>
<div id="FlipOutCardsDemo">
	<div class="foc-main">
		<p>まんなか</p>
		<small>マウスオーバーしてごらんなさい</small>
	</div>
	<div class="foc-left">
		<p>左だ!</p>
		<small>left</small>
	</div>
	<div class="foc-left">
		<p>さらに左だ</p>
		<small>more left</small>
	</div>
	<div class="foc-right">
		<p>右だ!</p>
		<small>right</small>
	</div>
	<div class="foc-right">
		<p>さらに右だ!</p>
		<small>more right</small>
	</div>
	<div class="foc-bottom">
		<p>下だ!</p>
		<small>bottom</small>
	</div>
	<div class="foc-bottom">
		<p>さらに下だ!</p>
		<small>more bottom</small>
	</div>
</div>

FlipOutCardsについて

FlipOutCardsは、複数の要素をフリップアニメーションで表示できるプラグインです。 サイコロを開くようなアニメーションです。使ってみてはいかが?
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスGPL v2
対応ブラウザ

関連するjQueryプラグイン

  • Flip

    Flip

    Flipは、フリップアニメーションを簡単に実装できる

  • oriDomi

    oriDomi

    画像に折り目のついた紙のような動きを与える

  • transit

    transit

    animateメソッドを使うように手軽にcss3のtransitionアニメーションなどが使える

  • gridly

    gridly

    要素を格子状に配置し、それを移動させることができる

  • shapeshift

    shapeshift

    不揃いな要素をできるだけ隙間がなくなるように敷き詰めてくれる