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.
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/.
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.
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.
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.
Fantastic work mate. Would be really useful if you could make it compatible with other browsers too. Good job.
Not working in chrome 18.0.1025.168 m? :/ Or may be I dont know how to use it.. !
hum… I have the same version… and… it works!
Works perfectly in same version for me.
I have the same version and it does not work.
Same version. Not working for me too. Also, if it helps, I am on ubuntu 12.04 64bit.
Indeed, it does not work on Chrome version 18.0.1025.168 on Linux :(
Is this free to use? I would like to use on a current project. Hollar back!
It’s a great Great GREAT WORK!! it’s just wonderful!! thanks for this!!
When I first saw Flipboard I was really impressed by its design. Most likely I will use this
Great work, well done!
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
“EXPERIMENTAL PAGE LAYOUT INSPIRED BY FLIPBOARD” is not working for me.
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?
The beginning I did not know what it thought the chrome does not work, it now appears a great effect
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.
Doesnt work in chrome for me…
Amazin Work!
Really impressing … now there is a fantastic way to screen pdfs or other presentation files to the web.
Doesn’t work. :(
Chrome & FireFox.
Linux OS.
this is awesome!! perfectly executed! :)
why the flipboard tutorial download source isn’t working when i open in firefox, i have firefox 12..
but when in demo tutorial it’s working, although i open in the same browser ???
The same for me, the “on line” version works well on Firefox, but the downloaded source didnt do.
For the rest a GREAT experiment and very usable!
This demo just made me drop by stealth-eye-scope. WOW. Great work!.. contact me. I have a project for you.
smart execution with the responsive design!
Oh, Greate layout. I love it :x
here’s the thing guys, chrome fails 3d transform test on Windows xp no matter, what version it is, observed similar behavior for jquery mobile transitions aswell.
This looks very nice (on Mac OS 10.6, chrome)!! curious how this works in iOS.
couple suggestions/feature requests: 1) key support (up/down/left/right) for flipping pages and shifting categories/feeds. Also maybe play with the mouse wheel clicks for left/right/scroll-up/down. This may make it more appealing to heavy keyboard and mouse users. 2) escape key as a back button.