FlipboardPageLayout:メージめくりを導入できるJs



ページ中央を境に左右めくりを導入してみます。

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

cssはデモページのcss/style.cssを参考にしてみて下さい。

        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<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>

2.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;">右端「&lt; 次へ」辺りでマウスを右から左にめくって(移動)みて下さい。</p>
				</div>
				<div class="f-cover-flip">&lt; 次へ</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><br><br>

<h2>3.JavaScript(body終了タグ直前)の記述例</h2>
		<script type="text/javascript" src="http://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>

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

		<script type="text/javascript" src="http://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>

</body>

FlipboardPageLayout:メージめくりを導入したデモ

ソース元:Experimental Page Layout Inspired by Flipboard

対応ブラウザはSafariとChromeっぽいですが、FireFoxでも一応見れました。
IEで見ると違うレイアウトで見えますね。

iPadやiPhone、AndroidのWebアプリに良さそうな感じです。