Experimental Page Layout Inspired by Flipboard

An experimental page layout that let's you navigate pages by swiping or dragging as in a booklet, inspired by Flipboard.

Experimental Page Layout Inspired by Flipboard

View demo Download source

Today we want to share an experimental 3D layout with you. It’s inspired by the famous Flipboard app where a seamlessly “normal” page flips like a page in a book when swiped. We’ve tried to re-create that effect using CSS 3D transforms and JavaScript, making a layout that is “flippable” and responsive. While the swiping makes sense for touch devices, dragging will do for normal browsers.

FlipboardPageLayout01

For the demo, we’ve made a little booklet with some placeholder text and images from NASA HQ. The images are licensed under the Creative Commons Attribution-NonCommercial 2.0 Generic License. The placeholder text is by http://hipsteripsum.me/.

FlipboardPageLayout02

Please notice that this is very experimental and just a proof-of-concept. It was tested in the latest versions of Safari, Chrome and Safari Mobile. The behavior is unfortunately not as nice as expected in Firefox.

There are probably still many undiscovered bugs and although Safari and Chrome support all the properties used, we had to apply a couple of hacks to overcome some unexpected behavior. Let us know about your experience with it and how it performs.

FlipboardPageLayout03

Some of the jQuery plugins we are using for this:

  • History.js for keeping track of the current state/pages
  • TouchSwipe for dragging and swiping the pages
  • Modernizr for checking browser support of the CSS properties

The HTML is build up of a main wrapper with the class container and the ID flip. Inside, we’ll have all the pages, the first one being the cover and the last one being the back of the booklet. The other pages will contain some title element and boxes. These boxes will each need an additional “height” and “width” class which will give the element percentage-based dimensions. For example, w-50 is a class that will give the element a width of 50%. Depending on how a page should be laid out, we would add a fitting set of items:

<div id="flip" class="container">
	
	<div class="f-page f-cover">
		<!-- ... -->
	</div>
	
	<div class="f-page">
		<div class="f-title">
			<!-- ... -->
		</div>
		<div class="box w-50 h-100">
			<div class="img-cont img-1"></div>
			<h3>Headline <span>Published May 7, 2012</span></h3>
			<p>Some text</p>
		</div>
		<div class="box w-50 h-100">
			<!-- ... -->
		</div>
	</div>
	
	<div class="f-page">
		<!-- ... -->
	</div>
	
	<!-- ... -->
	
	<div class="f-page f-cover-back">
		<!-- ... -->
	</div>

</div>

We are applying some “tricks” for making everything work responsively. The images are background-images and we set the background size of that element to “cover” while leaving the width and height fluid, in percentages. That’s of course not how it should be done. But it’s just for demonstration purpose. The teaser text is already loaded, and just “cut off” because the box is set to overflow “hidden”. To make it look smoother, we’ve just added a pseudo-element with a white to transparent gradient which covers the last bit of the box.

FlipboardPageLayout04

A great help for creating responsive layouts like these is this:

* { box-sizing: border-box } 

which finally got the attention it deserves thanks to this article by Paul Irish. When laying out elements using percentages it really comes in handy to use the border-box value since we can for example, define paddings in pixels and not break our 50% width box.

We will use jQuery Templates for creating the book structure:

<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>

The trick is to create a left side and a right side of a page, hiding half of each side to make it appear as one.

Before we call our experimental plugin, we need to check browser support first:

<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' ) {
				$( '#flip' ).flips();
			}
	
		}
	});
		
</script>

If there is browser support for CSS 3D transforms and transitions we’ll load all the other necessary scripts and call our flips plugin.

Please note again that it’s only experimental, but nonetheless, I hope you find it interesting.

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

Feedback 122

Comments are closed.
  1. 1

    Hi everyone.
    I have problem with “{{html theContentFront}}” in line 21 and 28. How can i fix that? When i delete that code; it doesn’t work.

  2. 2

    I believe it may have something to do with iOS 6’s interpretation of “-webkit-user-select: none;”…. did they break the feature with the update? In this experimental flipboard version, it appears to no longer work….. the -webkit-user-select: none; I mean. If you tap an article, the copy-paste-select text opens, but that is in iPad’s core functions, not on this product. Bummer. I liked playing around with this.

  3. 4

    Has anyone come up with a solution for the ios 6 issue for when you click on a content box it not opening?

  4. 5

    You are able to put the clicks working on the iOS, by doing:

    – Use the JqueryMobile (just add it to the project).
    – Around line 550 of the file Jquery.flips.js, here:

    this.$flipPages.find(‘.box’).bind(‘click tap’, function()

    Add the tap event.

  5. 6

    There is an issue in iPad when I turn portrait to landscape and landscape to portrait, I have to do this two times to display the correct layout or height of the page.

Comments are closed.