How to Implement Page Flipping Like a Book Using JavaScript【FlipboardPageLayout】

In this tutorial, I will show you how to implement page flipping like a book using JavaScript. We will introduce page flipping centered on the middle of the page, with left and right page turns.
We will use the following files: modernizr.custom.08464.js, jquery.min.js, query.tmpl.min.js, jquery.history.js, core.string.js, jquery.touchSwipe-1.2.5.js, and jquery.flips.js.

Loading CSS Files for Book-like Page Flipping

※CSS for the entire page, “Next” button, logo position, etc. are described. Modify as needed.

<link rel="stylesheet" type="text/css" href="css/style.css" />

JavaScript (in the head tag) Example for Implementing Book-like Page Flipping

※Load the modernizr.custom.08464.js file. Prepare a page template for page transitions (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 Example for Implementing Book-like Page Flipping

※Below is an explanation of the elements within the page. Modify as needed.
header (class=main-title): Start page (before the cover)
f-cover: Cover
f-page: Each page
f-cover-back: Back cover

		<header class="main-title">
			<h1>You can turn pages left and right around the center.</h1>
		</header>
		
	<div id="flip" class="container">
	
		<div class="f-page f-cover">
			<div class="cover-elements">
				<p style="font-size:30px;">Try flipping (moving) the mouse from right to left around the right edge "&lt; Next".</p>
			</div>
			<div class="f-cover-flip">&lt; Next</div>
		</div>
		
		<div class="f-page">
			<div class="f-title">
				<h2>First Page Title</h2>
			</div>
			<div class="box" style="font-size:100px;">
            This is the first page. ←Click here.
            <p style="font-size:20px; padding-top:15px;">Try flipping (moving) the mouse left and right around the edges.</p>
			</div>
		</div>
		
		<div class="f-page">
			<div class="f-title">
				<h2>Second Page Title</h2>
			</div>
			<div class="box" style="font-size:100px;">
            This is the second page. ←Click here.
            <p style="font-size:20px; padding-top:15px;">Try flipping (moving) the mouse left and right around the edges.</p>
			</div>
		</div>
		
		<div class="f-page">
			<div class="f-title">
				<h2>Third Page Title</h2>
			</div>
			<div class="box" style="font-size:100px;">
            This is the third page. ←Click here.
            <p style="font-size:20px; padding-top:15px;">Try flipping (moving) the mouse left and right around the edges.</p>
			</div>
		</div>
		
		<div class="f-page f-cover-back">
			<div id="codrops-ad-wrapper" style="font-size:100px;">
            This is the back cover.
			</div>
		</div>
	</div>

JavaScript (just before the closing body tag) for Implementing Book-like Page Flipping

※Load the jquery.min.js (v1.7.2) file. Use Modernizr.load to load jquery.tmpl.min.js, jquery.history.js, core.string.js, jquery.touchSwipe-1.2.5.js, and jquery.flips.js files. Depending on the conditions after page flipping, load the fallback.css file.

		<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：メージめくりを導入したデモ

FlipboardPageLayout: Demo Page with Page Flipping

FlipboardPageLayout: Demo with Page Flipping

Source: Experimental Page Layout Inspired by Flipboard

Source: Experimental Page Layout Inspired by Flipboard
The compatible browsers seem to be Safari and Chrome, but it also worked in FireFox. It looks different in IE. It seems good for web apps on iPad, iPhone, and Android.

　
※Please use at your own risk.
　Do not use the Google Analytics tag within the demo page tag.