3D Book Showcase

今回は、新しいオンライン書店のサイトにも応用できそうなリアルな本のショーケースの紹介です。本の情報とともに、立体的にリアルな動きの本が表示され、印象的な演出が実現できます。

ユーザーに新しい体験をしてもらうことで、紹介している本に興味を持ってもらえるような個性的なオンライン書店のサイトが作成できるかもしれません。

サンプルを作ってみました。

『リアルな本を再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」サンプル』

※古いブラウザでは正しく動作しませんので、ご注意下さい。

(サンプルの本の表紙などは、サンプル用にオリジナルで製作していますので、このような表紙の本は実在しません。「葉隠」「武士道」「五輪書」の本自体は様々な出版社から出ています。)

本のショーケースになっているソース部分の仕組みが理解できると、導入は難しくないです。レスポンシブ対応になっているので、色々な画面サイズで自然に閲覧できるのも嬉しいですね。


【使用方法】
まずはこちらの3D Book Showcaseのサイトからソースを一式ダウンロードします。

<head>部分にCSSを記述します。

次に</body>直前にJavaScriptを記述します。

1冊分の本の構造は次のようになっています。
<body>部分に

component.cssファイルのソースを変更すると本のデザインが変更できますので、お好みに合わせて修正して下さい。

最後にサンプルのソースを書いておいきます。長いので途中省略しています。ご参考まで。

この記事と関連してると思われる記事: