CSS3 : Alternative au Flex Book de Ruben

Toujours dans le but de prouver qu’il est tout à fait possible de se passer de la technologie Flash, cet article devrait intéresser tous les littéraires qui passent par ici car il s’agit de programmer un livre virtuel pouvant être feuilleter à la souris.

© http://flashspeaksactionscript.com

Flash

Il faut bien l’avouer, la référence dans ce genre d’outil reste le composant Flex crée par Ruben Swieringa, distribué sous licence Creative Commons, qui est tout à fait bluffant.

Je l’ai moi même utilisé pour faire l’ancien site web du roman de Greg, Poesie, qui n’est malheureusement plus en ligne. Le code source de ce composant est simple à mettre en place et à paramétrer, le squelette du livre virtuel est le suivant :

<rs:Book id="myBook" x="{Math.round(Application.application.width/2-400)}" y="50" width="800" height="530"
        openAt="0" autoFlipDuration="600" easing="0.7" regionSize="150"
        sideFlip="true" hardCover="true" hover="true" snap="false" flipOnClick="true">
        <rs:Page>
            <mx:Image source="@Embed('assets/img/sumeco/dreamscan.jpg')" />
            <mx:Label
                x="343" y="38"
                fontFamily="Verdana" fontSize="9" color="#466C64"
                text="beta2" />
            <mx:Label
                left="30" right="30" y="90"
                fontFamily="Arial" fontSize="10" color="#9BBFBA" textAlign="center"
                text="by Ruben Swieringa" />
        </rs:Page>
        <rs:Page>
            <mx:Image source="@Embed('assets/img/sumeco/renaissance.jpg')" />
            <mx:VBox left="33" right="33" top="300" bottom="33" verticalGap="0" horizontalAlign="right">
                <mx:LinkButton styleName="index" label="transparency" click="myBook.gotoPage(transparencyPage)" />
                <mx:LinkButton styleName="index" label="tearing" click="myBook.gotoPage(beforeTearPage)" />
                <mx:LinkButton styleName="index" label="gotoPage()" click="myBook.gotoPage(gotoPage)" />
                <mx:LinkButton styleName="index" label="liveBitmapping" click="myBook.gotoPage(animatedPage)" />
                <mx:LinkButton styleName="index" label="hard-back" click="myBook.gotoPage(hardPage1)" />
                <mx:LinkButton styleName="index" label="events" click="myBook.gotoPage(eventsPage)" />
            </mx:VBox>
        </rs:Page>
</rs:Book>

Une démo s’impose en cliquant sur le lien suivant : Flex Book Component (beta).

Le livre généré est vraiment beau, on croirait tourner réellement les pages d’un livre, j’ai été bluffé lorsque je suis tombé dessus la première fois, toutefois j’émets quelques réserves quant à son optimisation car il exige de nombreuses ressources matériel pour le faire tourner et votre navigateur consommera de plus en plus de mémoire au fur et à mesure que vous tournerez les pages du livre.

Un autre site propose son « pageflip engine » opensource qui mérite le détour (je ne l’ai pas testé personnellement) : http://www.megazine3.de/

CSS3

Les nouvelles spécifications de CSS3 nous permettent de développer à présent des interfaces riches sans l’aide d’un quelconque plugin ou framework et sans JavaScript.

Les notions telles « animation », « ombrage », « transparence », « arrondi », « dégradé » ou « effet » seront désormais envisageable nativement sur tous les navigateurs récents qui implémente cette nouvelle spécification. Tout cela donne des idées et donne surtout envie d’utiliser ce nouveau potentiel sur nos navigateurs.

• Avec effet « page flip »

L’effet de « pageflip », ou enroulement des pages, pour passer d’une page à l’autre à la souris a déjà été pensé et réalisé par Román Cortés, en voici la démonstration sur son site.

A mon avis il manque peu de chose et certainement un peu de JavaScript pour qu’un livre virtuel naisse de ce code car le principal effet du livre est là.

© http://www.romancortes.com

• Sans effet « page flip »

Crée par Peter Craddock, ce livre virtuel est moins joli mais reste une alternative tout aussi intéressante. L’apparence du livre est réalisé en pur CSS sans image tandis que le comportement des pages est fait en JavaScript.

Le livre est statique (pages et coins), seul le contenu bouge et transite d’une page à un autre, simple mais efficace, en voici la démonstration.

© http://media.smashingmagazine.com

Conclusion

On est encore loin de rivaliser avec Flash pour le moment en faisant du CSS et JavaScript mais je pense sincèrement qu’il y aura moyen d’égaler le composant de Ruben dans quelque temps.

Cet article a été écrit par :

Mimie – qui a déjà rédigé 123 posts sur Des Geeks et des lettres.

Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !

Contacter l'auteur

Jetez aussi un oeil sur :

• CSS3 : Offrez un coeur à la Saint Valentin