カードをめくるエフェクトの導入方法
ジョーカー×ジョーカーのキャラクターページの画像。お気づきの方もいらっしゃると思いますが、イラストをクリックするとくるっと裏返しになるような仕組みになっております。
今回はそのやり方を細かく記載致します。
用意するもの
- jQuery
- QuickFlipプラグイン
- 表の画像
- 裏の画像
※表の画像と裏の画像は同じサイズのデータを用意してください。
まずはこちらのページからQuickFlipプラグインをダウンロードします。
解凍したフォルダからこちらの３つををフォルダにコピーします。
- jquery-1.2.6.min.js（jquery本体）
- quickflip.js（QuickFlipプラグイン）
- quickflip.css（QuickFlipプラグイン用のCSS）
プラグインを該当ページにドーンします。リンクさえできていれば問題ないので、example.htmlとほぼ同じ。
この他、画像サイズとくるりんさせるdivタグのサイズを合わせる必要があるので、それも書いてください。
<head><script type="text/javascript" src="quickflip/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="quickflip/quickflip.js"></script>
<link type="text/css" rel="stylesheet" href="quickflip/quickflip.css" />
<style type="text/css">
<!--
.quickFlip, .quickFlipPanel {
height: 100px; /*画像の縦のサイズ*/
width: 200px; /*画像の横のサイズ*/
}
-->
</style>
</head>
画像をドーンします。example.htmlを参考にしながら書いていきます。
<div class="quickFlip">
<div class="quickFlipPanel"><a href="#" class="quickFlipCta"><img src="./image/omote.jpg" alt="表" width="200" height="100" /></a></div>
<div class="quickFlipPanel"><a href="#" class="quickFlipCta"><img src="./image/ura.jpg" alt="裏" width="200" height="100" /></a></div>
</div>
QuickFlipのexample.htmlソースはこちら
<div>
<div>
<p> Front content here </p>
<p>Click to Flip</p>
<p style="margin-top:30px;"><a href="http://jonraasch.com/blog/quickflip-jquery-plugin">More About QuickFlip</a></p>
</div>
<div>
<p> Back content here </p>
<p>Click to Flip</p>
<p style="margin-top:30px;"><a href="http://jonraasch.com/blog/quickflip-jquery-plugin">More About QuickFlip</a></p>
</div>
</div>
quickFlipPanelクラスのdivがくるっと回る部分です。最初に出てくるdivが表。次に出てくるdivが裏。
ページをアップします→完成！
サンプルはこちら。
サンプル
イラスト版実装はこっち。表はイラスト。裏はカードの模様。
ジョーカー×ジョーカーのキャラクターページ
参考先：
