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!

 

Commentaires

comments

3 commentaires

  1. Richard sur 5 novembre 2012 à 17 h 00 min

    Totally cool guys. Looks like the cover in digital books can be the main feature! 

  2. […] Walrus ist eine ziemlich innovative E-Book-Schmiede aus Frankreich, die uns in dieser Woche präsentiert, […]

  3. Enlaces y lecturas de la semana (8) | Bianka Hajdu sur 11 novembre 2012 à 14 h 25 min

    […] Portadas con letras interactivas usando sólo CSS Funciona en tablet, claro. […]

Laissez un commentaire