petargyurov/virtual-bookshelf

A simple bookshelf made in CSS, HTML and vanilla JS.

Virtual Bookshelf

This is a simple visualisation of books on a bookshelf using some CSS transforms to give the effect of picking out the book when you hover over it.

I use it on my personal site to track what books I've read. It integrates nicely with static site generators, and well, just about anything since it's all vanilla JS, CSS and HTML.

How do I add more books?

A book is defined as follows:

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

Simply add this snippet for each book you want inside <div class="bookshelf">.

Why use JS at all?

I originally aimed for a no-JS implementation but there was no way of adding randomness to the book height, colours and patterns without it. You can of course remove the JS and implement that stuff manually.

Is this free to use?

Yep, do whatever you want with it.

If you found this project useful you can make use of the following badge to spread the word:

Is it perfect?

Nope. Doesn't handle long titles well. I'm sure there are other alignment issues. I wrote this in a day, don't expect much. Feel free to submit fixes/improvements.

virtual-bookshelf's Issues

Request: Short Tutorial

Hey man, I found this repo through your post on Reddit. I think it's really great and I wanna add it to my site too.

My site is a simple jekyll blog. I've only written plain text posts in markdown so far, and I am unsure of how to add this into the 'About' page of my site. How would I go about adding this bookshelf to the 'About' page of my site?

If you could give me some steps to do that, I'd be thankful.

Feature request: Book width

Hi! I really like this project. It would be fun if you could add the number of pages of the book, and it would scale the width beyond a certain number of pages to make big books thicker on the shelf. Minimal thickness is, say 35px, but everything above 300 pages increases the thickness by some amount (1px per 10 pages, with a max of 30px)

Safari support

Hi Petar,

great project, love the bookshelf idea.

Just wanted to let you know that the bookshelf ist not displayed correctly on Safari (Safari 15.4, macOS 12.3.1).

Here's a screenshot to illustrate the problem:

Here's how the same bookshelf is rendered on Chrome: