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

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.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 122

Comments are closed.
  1. Really impressive page layout. Anyway of making it work with Firefox as well? And how stable is for implementing it in a proper website?

  2. The bit that doesn’t work in firefox is the modal box display… why not fix that up before writing the article instead of continuing the webkit problem mobile developers are creating?

    • If the future is mobile and mobile is webkit, then the future is webkit. Deal with it.

    • @Ian We’ve had this problem before with Netscape and Internet Explorer, IE won and look what happened. I like webkit, it’s a good engine, but we can’t have mono culture in technology, it always leads to stagnation. Deal with that.

  3. Hmm I like it but it is not clear enough to see that articles are just excerpts and you have to click to full article. The page flip effect looks okay but not very natural except you like to buy news papers printed on plastic papers πŸ˜‰
    But I like the blur effect allot!

  4. To me this is fantastic. It perfectly works with safari . I have seen flip-able magazine before, such as Porsche magazine, but I’m not sure what’s different between your case and those magazines in terms of backend.
    Thank you

  5. Works beautifully and I love how it’s mobile friendly. I would suggest you add thumbs to the mobile version too to make it more interesting and size it to fit img { max-width: 100%; }

    • Cool that it still displays as a normal web page without having to “redirect to a version for older browsers.”

      After I read your ‘It’s just a full page” I fired up Firefox to see what it looks like, and was slightly disappointed that it worked perfectly. πŸ™‚ I’m using Firefox 12. Now I gotta find something older to see how nicely it degrades.

  6. This is a terrific demo and a perfect browser application for magazines and news based sites. I love Flipboard and have also been very turned on by how Zite works. Very nice job, and thank you for sharing the code.

  7. As cool as the flip animation is, the thing that has always been amazing to me about the Flipboard UI is the fact that they provide just enough info on the article for me to know to clickthrough or to skip. You did a nice job with this. I love the fade to open the article and return to the board layout. Great POC.

  8. A similar effect is achieved with TurnJs which works in a wider amount of broswers, however your demo is also quite nice !

  9. Fantastic work mate. Would be really useful if you could make it compatible with other browsers too. Good job.

  10. Not working in chrome 18.0.1025.168 m? :/ Or may be I dont know how to use it.. !

  11. Is this free to use? I would like to use on a current project. Hollar back!

  12. It’s a great Great GREAT WORK!! it’s just wonderful!! thanks for this!!

  13. When I first saw Flipboard I was really impressed by its design. Most likely I will use this

    Great work, well done!

  14. Hi Pedro

    I really like this unique page effect, I think something like this really helps to engage the user. The script would be ideal for a magazine or newspaper website. If I had one criticism it would be that it is not instantly clear how to flip the internal pages, but I’m sure this could be easily modified.

    Cathy

  15. “EXPERIMENTAL PAGE LAYOUT INSPIRED BY FLIPBOARD” is not working for me.

  16. I sure like to be the guinea pig for this experiment for my online book site. any suggestions to to point other users that cant see this layout?

  17. The beginning I did not know what it thought the chrome does not work, it now appears a great effect

  18. Thanks for the amazing work!! I’ve been experimenting with this & loving it more each passing minute.
    I do have one question though…
    What should I be looking at, if I want to make the flip effect vertical instead of horizontal?
    i.e. if I want to drag the page from bottom to top as opposed to, dragging it from left to right.