à la Flipboard

Flipboard, iPad app of the year in 2010.
Sporting a very intuitive interface, flipboard is still an inspiration for designing applications.

A few months ago, we were asked to create a showcase iOS web app. Among the requested features, was to give it a flipboard effect.

Persistent:
We found this pretty cool implementation of the page flip.
A little script pulls news from a google feed and provides a page flip effect à la Flipboard.

It was just a matter of migrating:

• from closure to jQuery (we’d already decided on using jQuery+mobile)
• from Horizontal to Vertical page flipping.

It also took a bit of tweaking to make the script work on iOS devices as the CSS 3d-transforms didn’t behave consistently in the different environments.

Notably I ended up splitting the animation from a one step 180 degrees rotation to two 90 degrees rotations. This allowed for more control over the animation in general (important to compensate for the different glitches on the different browsers)

Try it:

The differences are minimal, but I had to adapt the scripts to iOS and to Chrome.

I also had it working on firefox, until version 13 poped up. I haven’t gotten to repairing it yet.

As the issues are not js capability-related but actually css 3d transform implementation issues, I chose to test to do a simple environment test.

I inlined a simple browser check to test for it:
var isMobile = (/iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase()));

Demo

How To:

Once you’ve recovered from our dazzling smiles and our thunderous wit, you can start implementing the script yourself. Either download the above demo (more complete), or check out the instructions bellow.

1. Include the scripts in your page

• flip.js
• flip.css

<link rel="stylesheet" href="css/flip.css" />
<script src="js/flip.js"></script>

2. Html:
<div id="page" data-role="page" data-title="Flip">
    <div class="container"/>
</div>

3. Javascript:

var FS = {};
FS.flipSet = null;
$("#page").live("pageinit", function() {
    var nodes = {...};
    var height = $(window).height();
    var isMobile = /iphone|ipad|ipod/i.test(navigator.userAgent.toLowerCase()));
    // All you need is to know the height of the space you want to have flipping
    FS.flipSet = new FlipSet($(".container"), height, nodes);
});

4. Navigation:

• FS.flipSet.next(); // Show next page
• FS.flipSet.previous(); // Show previous page

You can also pass in a callback method:

FS.flipSet.next(function() {
    alert("Flipped pages");
});


5. I added a few convenience methods to add nodes to the front or back of the stack:

• FS.flipSet.push($node); // Adds a node at the end of the queue
• FS.flipSet.unshift($node); // Adds a node at the beginning of the queue

Conclusion:

The only real issue for the flip effect is discrepancies on the different environments, as some are simply not supported.
I’ve started experimenting with http://transformjs.strobeapp.com/ for the transformations and so far the results are very promising. More on that next time.