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

複数の画像を表示する際に、本をめくるような効果を与えると印象的になります。
JavaScriptライブラリjQueryのプラグイン「GrasshopperPebbles.com Demos: 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サンプルページ一覧

skuare.net