本をめくるように画像を表示する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「imBookFlip」サンプル
コメントする
記事作成：2009年10月27日 09:56
