INTERACTIVE COVERS FOR EBOOKS, ATTEMPT N°1: USING CSS3

[lisez cet article en français]

Hi there! We’d like to share with you a few tests we’ve made last week, involving interactive covers for ebooks. We’d love to see, in the next months and years, more of them into ebooks: they’re definitely more entertaining than basic fixed images.

Concerning this particular attempt, we did only use CSS and HTML: no Javascript involved (it will come later). Interactions are basic, but it works really fine! So, here’s the video.

Every single animations has been executed using pseudo-class :hover, the only trigger currently doing a good job in iBooks, especially since the epub:trigger seems to have been forgotten by iBooks developpers. We knew CSS transitions were fine in Fixed-Layout, but you’ll see it’s also great in flowable epubs.

This new « scrolling » feature in iBooks has an advantage: it skips this horrible fake page turning animation that appears when you click a link. So if you want to enjoy it at its best, we suggest you turn on that mode on your iDevice.

We could write a long explanation about how we did it, but the simpliest way to share it with you is to give you the code: so here it, in a .zip file containing the HTML file and the CSS. Feel free to open it, rewrite it, have fun with it. And if you want to share your creations , it’s even better!

Enjoy!