I made a virtual bookshelf for book reviews
mjdiloreto.github.ioThis is based on Peter Gyurov's work which he shared here a couple months ago https://news.ycombinator.com/item?id=31293727.
I loved the idea and wanted to use it for my site, but I also wanted to give my reviews of the books and thought it would be fun if you could click the books to expand them.
UI-wise, adding the big box of text seems tricky since it covers up what you're browsing, it's not entirely clear how to dismiss it while also seemingly being transparent to mouseover events on things beneath it. It's very easy to instantly end up in a state like this:
Yeah I found this limitation, didn't have quite enough time to work out all the kinks this weekend. I comment on this at the bottom of the page, I believe the mouse events go through the summary due to the 3D transformation. I'll probably have to rethink how that state is implemented (thinking fixed position, as long as the browser can smoothly transition).
Maybe a different/better idea is to put the text box in a fixed position out of the way of the books themselves. Even without the event problem it obscures the browsing view.
I'm just leaving this here as future inspiration: http://press.stripe.com
That's way cooler than this! Makes extensive use of canvas though, so I'm inclined to consider it cheating ;)
I think some books have no cover image, you can display book title on a background so that it won't behave weirdly.
Don't Make Me Think.
When I see this I think about the animations, spotting small UX oddities that go against convention.
I can't remember a thing about the books though.
And that is why Amazon don't present their books like this!
Keep going though, but you have to have things like text at an agreed minimum font size and you have to make the interface accessible. Only if you have thought through those parts and got solutions can you dare to do anything new these days online.
I sound critical but I like seeing things like this far more than Amazon's web pages, it is just theirs get my money.
Nice. But both yours and Peter Gyurov's work seem to have issue on Mobile with click?
Screenshots for your site and Peter Gyurov's site on iPhone Chrome: 1. https://i.imgur.com/BHZ6XVQ.png 2. https://i.imgur.com/oPP5bcs.png
Thanks for pointing this out. I don't use Chrome so it didn't cross my radar. I'll have to install it and make the fix.
This is unusable on iPad because an open book seems to be covered by closed ones.
Love the 3d effect, is it pure CSS? Also once I click on a book I can't close the popup, have to refresh the page.
No there is a small bit of JavaScript for the open/peek/close state machine.
The interaction is a bit of an oversight on my part, you have to click the pop-up to close it.
Why can't you close any of the books once opened?
This issue should be fixed now. You originally had to click the popup again to make it close, but now you can click anywhere outside.
Why don’t you offer an option to see stacks instead of vertical layout? It’s so much easier to read the titles when they are horizontal.
A stack is a great idea! Peter's initial implementation was a vertical "shelf" like this, so I just stuck with that.
They're just that good. Real page turners.