Customer Login

Lost password?

View your shopping cart

Blog

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 Responses

  1. Richard says:

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

    Reply

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *