virtual bookshelf

Estantería virtual

Esta es una visualización simple de libros en una estantería utilizando algunas transformaciones de CSS para dar el efecto de elegir el libro cuando se desplaza sobre él.

Lo uso en mi sitio personal para rastrear los libros que he leído. Se integra bien con los generadores de sitios estáticos, y bueno, casi cualquier cosa, ya que todo es Vanilla JS, CSS y HTML.

¿Cómo agrego más libros?

Un libro se define de la siguiente manera:

 < 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 >

Simplemente agregue este fragmento para cada libro que desee dentro <div class="bookshelf"> .

¿Por qué usar JS en absoluto?

Originalmente tenía como objetivo una implementación de NO-JS, pero no había forma de agregar aleatoriedad a la altura, colores y patrones del libro sin ella. Por supuesto, puede eliminar el JS e implementar esas cosas manualmente.

¿Es esto gratis de usar?

Sí, haz lo que quieras con él.

Si encontró este proyecto útil, puede hacer uso de la siguiente insignia para difundir la palabra:

¿Es perfecto?

No. No maneja bien los títulos largos. Estoy seguro de que hay otros problemas de alineación. Escribí esto en un día, no esperes mucho. Siéntase libre de enviar soluciones/mejoras.