SethTrowbridge/css-3d-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

correct pages

Browse Source
This commit is contained in:
TreetopFlyer 2021-08-13 17:25:34 -04:00
parent f1eeab5557
commit 5bb9a865b6
8 changed files with 171 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
book-page-0.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
book-page-5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 684 KiB

BIN
book-page-6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 575 KiB

BIN
book-page-devo-1.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 83 KiB

BIN
book-page-devo-2.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 89 KiB

BIN
book-page-intro-left.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 95 KiB

BIN
book-page-intro-right.JPG
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 59 KiB

40
index.html
View File

@ -2,11 +2,10 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" >
</head> </head>
<body> <body>
<main> <main>
<style> <style>
.Shot .Shot
{ {
@ -140,38 +139,37 @@
height: 100%; height: 100%;
} }
</style> </style>
<div class="Shot" show="cover"> <div class="Shot" show="cover">
<div class="Book"> <div class="Book">
<img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/> <img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
<div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div> <div class="Page Page--Fill"> <div class="Front Shadow--Radiosity "><img src="book-panel-spine.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-spine.jpg"/></div> </div>
<div class="Spine"> <div class="Spine">
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div> <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity "><img src="book-panel-front.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-front.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-3.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-5.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-4.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-1.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-2.jpg"/></div> </div> <div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-6.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page Page--Shrink" swing="closed"> <div class="Front Shadow--Sheet Shadow--Drop"><img src="book-page-0.jpg"/></div> <div class="Back Shadow--Sheet Shadow--Sheet--Flip"><img src="book-page-0.jpg"/></div> </div>
<div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div> <div class="Page" swing="closed"> <div class="Front Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> <div class="Back Shadow--Radiosity"><img src="book-panel-back.jpg"/></div> </div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<button onclick="bookPose('cover'); bookClose();">Front</button> <button onclick="bookPose('cover'); bookClose();">Front</button>
<button onclick="bookPose('spine'); bookClose();">Spine</button> <button onclick="bookPose('spine'); bookClose();">Spine</button>
<button onclick="bookPose('back'); bookClose();">Back</button> <button onclick="bookPose('back'); bookClose();">Back</button>
<button onclick="bookPose('pages'); bookOpen(3);">Intro</button> <button onclick="bookPose('pages'); bookOpen(4);">Intro</button>
<button onclick="bookPose('pages'); bookOpen(4);">Spread 1</button> <button onclick="bookPose('pages'); bookOpen(5);">Days 1 & 2</button>
<button onclick="bookPose('pages'); bookOpen(5);">Spread 2</button> <button onclick="bookPose('pages'); bookOpen(6);">Days 3 & 4</button>
<button onclick="bookPose('pages'); bookOpen(6);">3</button>
<button onclick="bookPose('pages'); bookOpen(7);">4</button>
</div> </div>
</main>
<script> <script>
let $ = query => Array.from(document.querySelectorAll(query)); let $ = query => Array.from(document.querySelectorAll(query));
let pages = $("[swing]"); let pages = $("[swing]");
@ -190,5 +188,7 @@ let bookPose = inPanel =>
bookClose(); bookClose();
}; };
</script> </script>
</main>
</body> </body>
</html> </html>