[read this post in english]

Une fois n’est pas coutume, nous vous proposons de partager avec nous quelques essais et pistes de design concernant l’ebook et plus particulièrement nos tentatives de rendre les couvertures plus vivantes que de simples images.

Pour cet essai, nous n’avons employé que de la CSS (des feuilles de styles, donc) et du HTML: pas de Javascript. Les interactions sont donc basiques mais elles fonctionnent étonnamment bien. Voici donc la vidéo.

L’intégralité des animations a été effectuée en utilisant la pseudo-classe :hover, la seule « gâchette » qui fonctionne sous iBooks pour le moment puisque epub:trigger n’a semble-t-il pas été implémentée dans la version 3.0. Nous savions que les propriétés d’animations CSS3 fonctionnaient très bien en mode Fixed Layout: elles fonctionnent également très bien dans un epub classique dit « flowable ».

À noter que le tout nouveau mode de lecture en scrolling « faire défiler » nous permet de zapper cette affreuse animation automatique de page tournée à chaque fois qu’un lien est déclenché. Si vous reproduisez l’effet, nous vous conseillons de régler votre iDevice dans ce mode particulier.

Nous pourrions vous expliquer longuement comment nous avons fait pour réaliser cette couverture, mais le plus simple est encore de vous en faire partager directement le code. Vous trouverez donc à cette adresse un fichier .zip contenant le fichier HTML et la CSS. Libre à vous de le décortiquer, de le modifier, bref, de vous amuser. Faites-nous partager vos créations si l’envie vous en prend!