turn.js — Effet de page tournée en Javascript

turn.js est un plugin jQuery créé par Emmanuel Garcia (@blasten) dont le but est d’ajouter un effet de transition entre deux blocs HTML pour donner l’impression que l’on tourne les pages d’un livre ou d’un magazine. Le script est léger (6 kb) et simple d’utilisation. Il utilise l’accélération matérielle et fonctionne sur tablettes et téléphones portables intelligents.

Les pré-requis en terme de marquage HTML sont :

<div id='magazine'>
    <div class="turn-page"> Page 1 </div>
    <div class="turn-page"> Page 2 </div>
    <div class="turn-page"> Page 3 </div>
</div>

L’appel du script s’effectue de la manière suivante :

$('#magazine').turn();

Un peu de CSS :

#magazine{
    width: 800px;
    height: 400px;
}
#magazine .turn-page {
    width: 400px;
    height: 400px;
    background-color: #ccc;
}

Et voilà !

Note : sur mon petit portable équipé d’un petit processeur Turion, l’effet manque de fluidité. Pour profiter de l’accélération matérielle, le script a sans doute besoin d’être un peu aidé par le… matériel 🙂

→ turn.js est disponible sur github.

Via @htmlzg