FullscreenBookBlock:メージめくりを導入できるJs パート2



前回紹介しました、
FLIPBOARDPAGELAYOUT:メージめくりを導入できるJS
のパート2です。
今回はページ中央を境に左右めくり、メニューと左右矢印でのページめくりが行えます。

1.ヘッダー(JavaScript)の記述例

cssはデモページのcss/jquery.jscrollpane.custom.css、css/bookblock.css、css/custom.cssを参考にしてみて下さい。

	<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.custom.css" />
	<link rel="stylesheet" type="text/css" href="css/bookblock.css" />
	<link rel="stylesheet" type="text/css" href="css/custom.css" />
	<script src="js/modernizr.custom.79639.js"></script>

2.HTMLの記述例

		<div id="container" class="container">	

			<div class="menu-panel">
				<h3>メニュー</h3>
				<ul id="menu-toc" class="menu-toc">
					<li class="menu-toc-current"><a href="#item1">1ページ</a></li>
					<li><a href="#item2">2ページ</a></li>
					<li><a href="#item3">3ページ</a></li>
					<li><a href="#item4">4ページ</a></li>
					<li><a href="#item5">5ページ</a></li>
				</ul>
			</div>

			<div class="bb-custom-wrapper">
				<div id="bb-bookblock" class="bb-bookblock">
					<div class="bb-item" id="item1">
						<div class="content">
							<div class="scroller">
                            	<h1>左上の矢印(←、→)またはページ中央を境に左右めくりが可能です。</h1>
                                <div class="clTxt">1ページ目です。</div>
                                <div class="clTxt">左右端辺りでマウスを右から左・左から右にめくって(移動)みて下さい。<br>
                                左上のメニューまたは左右矢印ページ移動も可能です。</div>
							</div>
						</div>
					</div>
					<div class="bb-item" id="item2">
						<div class="content">
							<div class="scroller">
                            	<h2>2ページ目見出し</h2>
                                <div class="clTxt">2ページ目です。</div>
                                <div class="clTxt">左右端辺りでマウスを右から左・左から右にめくって(移動)みて下さい。<br>
                                左上のメニューまたは左右矢印ページ移動も可能です。</div>
							</div>
						</div>
					</div>
					<div class="bb-item" id="item3">
						<div class="content">
							<div class="scroller">
                            	<h2>3ページ目見出し</h2>
                                <div class="clTxt">3ページ目です。</div>
                                <div class="clTxt">左右端辺りでマウスを右から左・左から右にめくって(移動)みて下さい。<br>
                                左上のメニューまたは左右矢印ページ移動も可能です。</div>
							</div>
						</div>
					</div>
					<div class="bb-item" id="item4">
						<div class="content">
							<div class="scroller">
                            	<h2>4ページ目見出し</h2>
                                <div class="clTxt">4ページ目です。</div>
                                <div class="clTxt">左右端辺りでマウスを右から左・左から右にめくって(移動)みて下さい。<br>
                                左上のメニューまたは左右矢印ページ移動も可能です。</div>
							</div>
						</div>
					</div>
					<div class="bb-item" id="item5">
						<div class="content">
							<div class="scroller">
                            	<h2>5ページ目見出し</h2>
                                <div class="clTxt">5ページ目です。</div>
                                <div class="clTxt">左右端辺りでマウスを右から左・左から右にめくって(移動)みて下さい。<br>
                                左上のメニューまたは左右矢印ページ移動も可能です。</div>
							</div>
						</div>
					</div>
				</div>
				
				<nav>
					<span id="bb-nav-prev">&larr;</span>
					<span id="bb-nav-next">&rarr;</span>
				</nav>

				<span id="tblcontents" class="menu-button">メニュー</span>

			</div>
				
		</div><!-- /container -->

3.JavaScript(body終了タグ直前)の記述例

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script src="js/jquery.mousewheel.js"></script>
		<script src="js/jquery.jscrollpane.min.js"></script>
		<script src="js/jquerypp.custom.js"></script>
		<script src="js/jquery.bookblock.js"></script>
		<script src="js/page.js"></script>
		<script>
			$(function() {
				Page.init();
			});
		</script>

FullscreenBookBlock:メージめくりを導入したデモページ パート2

ソース元:Fullscreen Pageflip Layout with BookBlock

一応IEでも見れますが、めくりの演出は無くなって見えます。
こちらも同様にPadやiPhone、AndroidのWebアプリとして何か使えそうです。