Vous avez sans doute déjà rencontré ce que l’on appelle un « PageFlip », à base Flash cette « visionneuse » présente un livre ou un catalogue sous forme de pages à « tourner » au clic de la souris. Différentes versions existent, plus ou moins complètes du côté des possibilités annexes (sommaire interactif, impression, téléchargement, etc…).

Cette solution de présentation est malheureusement indisponible faute de la présence de Flash sur les terminaux mobiles (sous iOs actuellement et très souvent sous Androïd car Flash demande beaucoup de ressources pour fonctionner). Avec l’arrivé des CSS3 et HTML5 on voit arriver des solutions procurant une bonne expérience dans ce domaine.

Aujourd’hui je m’arrête sur cette solution TurnJs qui utilise jQuery et un module particulier développé par son auteur Emmanuel García originaire du Venezuela. On est en présence de ce qui fait la force des solutions basées sur Javascript, c’est épuré, la navigation multitouch est très bonne, sur l’écran de votre machine de bureau la navigation peut s’effectuer avec la souris ou avec les touches fléchées du clavier (très pratique).

Il est possible d’afficher un déroulé de vignettes des pages en vignettes sous la catalogue, ou une simple barre de défilement. Un clic dans l’image va zoomer dans la page est charger le visuel en haute résolution pour consultation, un second clic dans le zoom revient à la page de présentation.

Il est possible d’ajouter des « zones » sensibles dans les images des pages via un fichier .jison et des repères de zonage, de quoi rendre la présentation plus efficace.

Cette simplicité fait la force de l’interface globale, elle laisse de la place pour « adapter » la présentation à une charte graphique, un logo, un visuel complémentaire.

Et c’est fonctionnel sur Internet Explorer 8 et supérieur dans la dernière version.

Testez TurnJs sur cette page. 

Sources : TurnJs