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

  • files
  • js
  • html
<script src="<PATH>/jquery.min.js"></script>
<script src="<PATH>/jquery.flip.min.js"></script>
<script>
    $(window).load(function(){
		$('#FlipDemo div').flip({
			direction:'tb',
			color: '#3C948B'
		})
		$('#FlipPad button:not(.revert)').bind('click',function(){
			var $this = $(this);
			$('#FlipDemo div').flip({
				direction: $this.attr('rel'),
				color: $this.attr('rev'),
			})
			return false;
		});
		$('.revert').bind('click',function(){
			$('#FlipDemo div').revertFlip();
			return false;
		});
    });
</script>
<div id="FlipDemo">
	<div></div>
</div>
<div id="FlipPad">
	<button class="yellow left" rel="rl" rev="#658193">left</button>
	<button class="yellow top" rel="bt" rev="#ecd16f">top</button>
	<button class="yellow bottom" rel="tb" rev="#3c948b">bottom</button>
	<button class="yellow right" rel="lr" rev="#000000">right</button>
	<button class="red revert">revert</button>
</div>

Flipについて

Flipは、フリップアニメーションを簡単に実装できるプラグインです。 シンプルですが、フリップアニメーションの実装にはおすすめです
ダウンロード こちら
ドキュメント こちら
デモ こちら
ライセンスMIT or GPL
対応ブラウザ

関連するjQueryプラグイン

  • color

    color

    jQueryのanimateメソッドでは実現できない色のアニメーションを可能にする

  • kwicks

    kwicks

    スライドパネルでマウスオーバーした要素の高さ、幅をミョーンと伸ばしてくれる

  • Circulate

    Circulate

    Circulateは、要素をサークル状に回転させることができる

  • oriDomi

    oriDomi

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

  • Vague

    Vague

    Vagueは、要素にブラーアニメーションをセットできる