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アナリティクスタグは流用しないで下さい。