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!

 

Fondateur des éditions Walrus, éditeur quand il peut entre deux biberons. Dit parfois des bêtises, mais toujours pour la bonne cause. Amateur de littératures décalées et hors normes ; les sentiers battus n’existent que pour être évités.

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