JavaScriptを使って本の様にページめくりをする方法をご紹介します。ページ中央を境に左右ページめくりを導入してみます。
modernizr.custom.08464.js、jquery.min.js、query.tmpl.min.js、jquery.history.js、core.string.js、jquery.touchSwipe-1.2.5.js、jquery.flips.jsファイルを使います。
本の様にページめくりを導入するCSSファイルの読み込み
※ページ全体、「次へ」ボタン、ロゴ位置等のCSSを記述してます。必要に応じて変更して下さい。
<link rel="stylesheet" type="text/css" href="css/style.css" />
使って本の様にページめくりを導入するJavaScriptの（headタグ内）記述例
※modernizr.custom.08464.jsファイルを読み込みます。切り替わりページのページテンプレート（id=”pageTmpl”）を用意します。
<script type="text/javascript" src="js/modernizr.custom.08464.js"></script>
<script id="pageTmpl" type="text/x-jquery-tmpl">
<div class="${theClass}" style="${theStyle}">
<div class="front">
<div class="outer">
<div class="content" style="${theContentStyleFront}">
<div class="inner">{{html theContentFront}}</div>
</div>
</div>
</div>
<div class="back">
<div class="outer">
<div class="content" style="${theContentStyleBack}">
<div class="inner">{{html theContentBack}}</div>
</div>
</div>
</div>
</div>
</script>
本の様にページめくりを導入するHTMLの記述例
※以下、ページ内要素の説明です。必要に応じて変更して下さい。
header（class=main-title）：スタートページ（表紙の前）
f-cover：表紙
f-page：各ページ
f-cover-back：裏表紙
<header class="main-title">
<h1>ページ中央を境に左右めくりが可能です。</h1>
</header>
<div id="flip" class="container">
<div class="f-page f-cover">
<div class="cover-elements">
<p style="font-size:30px;">右端「< 次へ」辺りでマウスを右から左にめくって（移動）みて下さい。</p>
</div>
<div class="f-cover-flip">< 次へ</div>
</div>
<div class="f-page">
<div class="f-title">
<h2>1ページ目見出し</h2>
</div>
<div class="box" style="font-size:100px;">
1ページ目です。←クリックしてみて下さい。
<p style="font-size:20px; padding-top:15px;">左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
</div>
</div>
<div class="f-page">
<div class="f-title">
<h2>2ページ目見出し</h2>
</div>
<div class="box" style="font-size:100px;">
2ページ目です。←クリックしてみて下さい。
<p style="font-size:20px; padding-top:15px;">左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
</div>
</div>
<div class="f-page">
<div class="f-title">
<h2>3ページ目見出し</h2>
</div>
<div class="box" style="font-size:100px;">
3ページ目です。←クリックしてみて下さい。
<p style="font-size:20px; padding-top:15px;">左右端辺りでマウスを右から左・左から右にめくって（移動）みて下さい。</p>
</div>
</div>
<div class="f-page f-cover-back">
<div id="codrops-ad-wrapper" style="font-size:100px;">
裏表紙です。
</div>
</div>
</div>
本の様にページめくりを導入するJavaScript（body終了タグ直前）の記述
※jquery.min.js（v1.7.2）ファイルを読み込みます。Modernizr.loadを使用し、jquery.tmpl.min.js、jquery.history.js、core.string.js、jquery.touchSwipe-1.2.5.js、jquery.flips.jsファイルを読み込みます。ページめくり後、条件によってfallback.cssファイルも読み込みます。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var $container = $( '#flip' ),
$pages = $container.children().hide();
Modernizr.load({
test: Modernizr.csstransforms3d && Modernizr.csstransitions,
yep : ['js/jquery.tmpl.min.js','js/jquery.history.js','js/core.string.js','js/jquery.touchSwipe-1.2.5.js','js/jquery.flips.js'],
nope: 'css/fallback.css',
callback : function( url, result, key ) {
if( url === 'css/fallback.css' ) {
$pages.show();
}
else if( url === 'js/jquery.flips.js' ) {
$container.flips();
}
}
});
</script>
FlipboardPageLayout：メージめくりを導入したデモページ
FlipboardPageLayout：メージめくりを導入したデモ
ソース元：Experimental Page Layout Inspired by Flipboard
ソース元：Experimental Page Layout Inspired by Flipboard
対応ブラウザはSafariとChromeっぽいですが、FireFoxでも一応見れました。IEで見ると違うレイアウトで見えますね。iPadやiPhone、AndroidのWebアプリには良さそうな感じです。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
