virtual bookshelf

Виртуальная книжная полка

Это простая визуализация книг на книжной полке с использованием некоторых преобразований CSS, чтобы дать эффект выбора книги, когда вы нажимаете над ней.

Я использую его на своем личном сайте, чтобы отследить, какие книги я прочитал. Он хорошо интегрируется со статическими генераторами сайтов, и хорошо, что все, поскольку все это ваниль JS, CSS и HTML.

Как добавить больше книг?

Книга определяется следующим образом:

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

Просто добавьте этот фрагмент для каждой книги, которую вы хотите, внутри <div class="bookshelf"> .

Зачем использовать JS вообще?

Первоначально я нацелился на реализацию NO-JS, но не было никакого способа добавить случайность к высоте книги, цвета и узора без нее. Вы, конечно, можете удалить JS и реализовать этот материал вручную.

Это бесплатно в использовании?

Да, делай с этим все, что хочешь.

Если вы нашли этот проект полезным, вы можете использовать следующий значок, чтобы распространить слово:

Это идеально?

Неа. Плохо справляется с длинными названиями. Я уверен, что есть другие проблемы выравнивания. Я написал это за день, не ожидайте многого. Не стесняйтесь отправлять исправления/улучшения.