フリップが回転するjQuery Plugin用プラグイン QuickFlip

QuickFlipは、フリップが回転するような感じで表示するコンテンツを切り替えるプラグインです。

設置方法

配布ページよりデータ一式をダウンロードし、QuickFlipを利用したいhtmlのhead要素などで以下のファイルを読み込みます。

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="quickflip.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="quickflip.css" />

表示する部分は以下です。

<div class="quickFlip">
    <div class="quickFlipPanel">
        <p> Front content here </p>
        <p class="quickFlipCta">Click to Flip</p>
    </div>

    <div class="quickFlipPanel">
        <p> Back content here </p>
        <p class="quickFlipCta">Click to Flip</p>
    </div>
</div>

quickFlipPanelのクラス名のついたdiv要素が差し替わる内容になります。クラスは複数指定することで異なるデザインもあてることができます。

<div class="quickFlip">
    <div class="quickFlipPanel scene1">
        <p> Front content here </p>
        <p class="quickFlipCta">Click to Flip</p>
    </div>

    <div class="quickFlipPanel scene2">
        <p> Back content here </p>
        <p class="quickFlipCta">Click to Flip</p>
    </div>
</div>

またフリップを切り替える速度も設定できます。

<script type="text/javascript">
    quickFlip.speed = Array( 100 , 90 );
</script>

QuickFlip

• http://jonraasch.com/blog/quickflip-jquery-plugin