4 ms·
I made a virtual bookshelf for book reviews
- j_crick 4y agoThis is unusable on iPad because an open book seems to be covered by closed ones. https://imgur.com/a/oOglVlv https://imgur.com/a/oOglVlv
- mjdiloreto 4y agoThis is based on Peter Gyurov's work which he shared here a couple months ago https://news.ycombinator.com/item?id=31293727 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.
- pvg 4y agoUI-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: https://i.imgur.com/T7uGJih.png https://i.imgur.com/T7uGJih.png
- mjdiloreto 4y agoYeah 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).
- pvg 4y agoMaybe 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.
- lloydatkinson 4y agoWhy can't you close any of the books once opened?
- solardev 4y agoThey're just that good. Real page turners.
- mjdiloreto 4y agoThis issue should be fixed now. You originally had to click the popup again to make it close, but now you can click anywhere outside.
- ldenoue 4y agoWhy 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.
- mjdiloreto 4y agoA stack is a great idea! Peter's initial implementation was a vertical "shelf" like this, so I just stuck with that.
- issung 4y agoLove 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.
- mjdiloreto 4y agoNo 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.
- kumarm 4y agoNice. 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 https://i.imgur.com/BHZ6XVQ.png 2. https://i.imgur.com/oPP5bcs.png https://i.imgur.com/oPP5bcs.png
- mjdiloreto 4y agoThanks 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.
- wan888888 4y agoI'm just leaving this here as future inspiration: http://press.stripe.com http://press.stripe.com
- mjdiloreto 4y agoThat's way cooler than this! Makes extensive use of canvas though, so I'm inclined to consider it cheating ;)
- Theodores 4y agoDon'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.
- saasxyz 4y agoI think some books have no cover image, you can display book title on a background so that it won't behave weirdly.