virtual bookshelf

Étagère virtuelle

Ceci est une visualisation simple des livres sur une étagère utilisant des transformations CSS pour donner l'effet de choisir le livre lorsque vous survolez dessus.

Je l'utilise sur mon site personnel pour suivre les livres que j'ai lus. Il s'intègre bien aux générateurs de sites statiques, et bien, à peu près n'importe quoi, car tout est Vanilla JS, CSS et HTML.

Comment ajouter plus de livres?

Un livre est défini comme suit:

 < div class =" book " >
    < div class =" side spine " >
        < span class =" spine-title " > Book Title </ span >
        < span class =" spine-author " > PG </ span >
    </ div >
    < div class =" side top " > </ div >
    < div class =" side cover " > </ div >
</ div >

Ajoutez simplement cet extrait pour chaque livre que vous voulez à l'intérieur <div class="bookshelf"> .

Pourquoi utiliser JS du tout?

Je visais à l'origine une implémentation no-js, mais il n'y avait aucun moyen d'ajouter de l'aléatoire à la hauteur, aux couleurs et aux motifs du livre sans lui. Vous pouvez bien sûr supprimer le JS et mettre en œuvre ce genre de choses manuellement.

Est-ce gratuit à utiliser?

Oui, faites ce que vous voulez avec.

Si vous avez trouvé ce projet utile, vous pouvez utiliser le badge suivant pour passer le mot:

Est-ce parfait?

Non. Ne gère pas bien les titres longs. Je suis sûr qu'il y a d'autres problèmes d'alignement. J'ai écrit ceci en une journée, ne vous attendez pas grand-chose. N'hésitez pas à soumettre des correctifs / améliorations.