virtual bookshelf

Virtuelles Bücherregal

Dies ist eine einfache Visualisierung von Büchern in einem Bücherregal mit einigen CSS -Transformationen, um das Buch auszuwählen, wenn Sie darüber schweben.

Ich benutze es auf meiner persönlichen Website, um zu verfolgen, welche Bücher ich gelesen habe. Es integriert sich gut in statische Site -Generatoren und nun, so gut wie alles, da alles Vanille -JS, CSS und HTML ist.

Wie füge ich weitere Bücher hinzu?

Ein Buch ist wie folgt definiert:

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

Fügen Sie dieses Snippet einfach für jedes Buch hinzu, das Sie in <div class="bookshelf"> haben.

Warum JS überhaupt verwenden?

Ich habe ursprünglich eine Implementierung von No-Js abgestattet, aber es gab keine Möglichkeit, die Buchhöhe, Farben und Muster ohne sie zufällig zu verleihen. Sie können die JS natürlich entfernen und das Zeug manuell implementieren.

Ist das kostenlos zu bedienen?

Ja, mach was du willst.

Wenn Sie dieses Projekt nützlich fanden, können Sie das folgende Abzeichen verwenden, um das Wort zu verbreiten:

Ist es perfekt?

Nein. Geht es nicht gut mit langen Titeln. Ich bin sicher, es gibt andere Ausrichtungsfragen. Ich habe das an einem Tag geschrieben, erwarte nicht viel. Fühlen Sie sich frei, Korrekturen/Verbesserungen einzureichen.