本をめくるように画像を表示するJavaScript「imBookFlip」

複数の画像を表示する際に、本をめくるような効果を与えると印象的になります。
JavaScriptライブラリjQueryのプラグイン「GrasshopperPebbles.com Demos: imBookFlip」で実現可能です。
本をめくるように画像を表示するJavaScript「imBookFlip」サンプル

使用方法
GrasshopperPebbles.com Demos: imBookFlipからjquery.imBookFlip.jsをjQueryからjquery.jsをダウンロードします。
<style>
#myBook {display:none;width: 604px;height:362px;}
.imBookPage {position:absolute;left:0px;top:0px;width: 300px;height:360px;color:#fff;overflow:hidden;border: solid 1px #000;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.imBookFlip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myBook").imBookFlip({
page_class: 'imBookPage',
autoFlip: 'click', //クリックしたら自動再生にする
autoFlipSpeed: 5000, //自動再生速度
});
});
</script>

※idは可変です。また、サイズは画像にあわせて調整ください。
最後に画像を記述します。
<div id="myBook" style="display:none;">
<div class="imBookPage" style="background: url(画像パス)")></div>
<div class="imBookPage" style="background: url(画像パス)")></div>
<div class="imBookPage" style="background: url(画像パス)")></div>
<!-- 以下画像分 -->
</div>

本をめくるように画像を表示するJavaScript「imBookFlip」サンプル

sponsors

「本をめくるように画像を表示するJavaScript「imBookFlip」」をシェアする

記事作成:
記事URL:

TOP > > > 本をめくるように画像を表示するJavaScript「imBookFlip」