I made a virtual bookshelf for book reviews

mjdiloreto 3 years ago |

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

pvg 3 years ago | |

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:

https://i.imgur.com/T7uGJih.png

mjdiloreto 3 years ago | | |

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

pvg 3 years ago | | |

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.

wan888888 3 years ago |

I'm just leaving this here as future inspiration: http://press.stripe.com

mjdiloreto 3 years ago | |

That's way cooler than this! Makes extensive use of canvas though, so I'm inclined to consider it cheating ;)

saasxyz 3 years ago |

I think some books have no cover image, you can display book title on a background so that it won't behave weirdly.

Theodores 3 years ago |

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.

kumarm 3 years ago |

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

mjdiloreto 3 years ago | |

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.

j_crick 3 years ago |

This is unusable on iPad because an open book seems to be covered by closed ones.

https://imgur.com/a/oOglVlv

issung 3 years ago |

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.

mjdiloreto 3 years ago | |

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.

lloydatkinson 3 years ago |

Why can't you close any of the books once opened?

mjdiloreto 3 years ago | |

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.

ldenoue 3 years ago | | |

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.

mjdiloreto 3 years ago | | |

A stack is a great idea! Peter's initial implementation was a vertical "shelf" like this, so I just stuck with that.

solardev 3 years ago | |

They're just that good. Real page turners.