correct pages
This commit is contained in:
parent
f1eeab5557
commit
5bb9a865b6
BIN
book-page-0.jpg
Normal file
BIN
book-page-0.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
book-page-5.jpg
Normal file
BIN
book-page-5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 684 KiB |
BIN
book-page-6.jpg
Normal file
BIN
book-page-6.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 575 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 59 KiB |
168
index.html
168
index.html
@ -2,14 +2,13 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" >
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
||||
<style>
|
||||
.Shot
|
||||
{
|
||||
<style>
|
||||
.Shot
|
||||
{
|
||||
transform: perspective(1000px);
|
||||
transform-style: preserve-3d;
|
||||
width:500px;
|
||||
@ -17,22 +16,22 @@
|
||||
margin:20px auto 0 auto;
|
||||
text-align:center;
|
||||
transition: transform 1s;
|
||||
}
|
||||
.Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
|
||||
.Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg) rotateY(180deg); }
|
||||
.Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
|
||||
.Shot[show="pages"]{ transform: perspective(800px) rotateX(-7deg) rotateY(0deg); }
|
||||
}
|
||||
.Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
|
||||
.Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg) rotateY(180deg); }
|
||||
.Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
|
||||
.Shot[show="pages"]{ transform: perspective(800px) rotateX(-7deg) rotateY(0deg); }
|
||||
|
||||
.Book
|
||||
{
|
||||
.Book
|
||||
{
|
||||
height:100%;
|
||||
transform-style: preserve-3d;
|
||||
transform: translateZ(-100px);
|
||||
position: relative;
|
||||
display:inline-block;
|
||||
}
|
||||
.Spine
|
||||
{
|
||||
}
|
||||
.Spine
|
||||
{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
margin:0 auto;
|
||||
@ -41,20 +40,20 @@
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
|
||||
.Page
|
||||
{
|
||||
.Page
|
||||
{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: transform 1s;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.Page[swing="closed"]{ transform: translateX(0px) rotateY(-90deg); }
|
||||
.Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
|
||||
.Page[swing="left" ]{ transform: translateX(3px) rotateY(-160deg); }
|
||||
.Page .Front, .Page .Back
|
||||
{
|
||||
}
|
||||
.Page[swing="closed"]{ transform: translateX(0px) rotateY(-90deg); }
|
||||
.Page[swing="right" ]{ transform: translateX(-3px) rotateY(-20deg); }
|
||||
.Page[swing="left" ]{ transform: translateX(3px) rotateY(-160deg); }
|
||||
.Page .Front, .Page .Back
|
||||
{
|
||||
float:left;
|
||||
position:absolute;
|
||||
top:0;
|
||||
@ -63,33 +62,33 @@
|
||||
backface-visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
.Page .Back
|
||||
{
|
||||
}
|
||||
.Page .Back
|
||||
{
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
.Page img
|
||||
{
|
||||
}
|
||||
.Page img
|
||||
{
|
||||
height:100%;
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
|
||||
.Page--Fill
|
||||
{
|
||||
.Page--Fill
|
||||
{
|
||||
display: block;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
.Page--Shrink
|
||||
{
|
||||
}
|
||||
.Page--Shrink
|
||||
{
|
||||
height:98%;
|
||||
top:1%;
|
||||
}
|
||||
.Shadow--Drop::before
|
||||
{
|
||||
}
|
||||
.Shadow--Drop::before
|
||||
{
|
||||
transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
|
||||
box-shadow: 0px 100px 60px black, 0px 100px 17px black;
|
||||
display: block;
|
||||
@ -99,10 +98,10 @@
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
border-radius: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
.Shadow--Sheet::after
|
||||
{
|
||||
.Shadow--Sheet::after
|
||||
{
|
||||
content:" ";
|
||||
|
||||
background-size: 100% 100%;
|
||||
@ -119,14 +118,14 @@
|
||||
|
||||
backface-visibility: hidden;
|
||||
transform:scaleX(-1);
|
||||
}
|
||||
.Shadow--Sheet--Flip::after
|
||||
{
|
||||
}
|
||||
.Shadow--Sheet--Flip::after
|
||||
{
|
||||
transform:scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
.Shadow--Radiosity::after
|
||||
{
|
||||
.Shadow--Radiosity::after
|
||||
{
|
||||
content: " ";
|
||||
background-size: 100% 100%;
|
||||
background-position: 0px 0px;
|
||||
@ -138,57 +137,58 @@
|
||||
z-index:100;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="Shot" show="cover">
|
||||
}
|
||||
</style>
|
||||
<div class="Shot" show="cover">
|
||||
<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="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 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-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-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-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-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-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-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-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-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-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-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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
</div>
|
||||
<div>
|
||||
<button onclick="bookPose('cover'); bookClose();">Front</button>
|
||||
<button onclick="bookPose('spine'); bookClose();">Spine</button>
|
||||
<button onclick="bookPose('back'); bookClose();">Back</button>
|
||||
<button onclick="bookPose('pages'); bookOpen(3);">Intro</button>
|
||||
<button onclick="bookPose('pages'); bookOpen(4);">Spread 1</button>
|
||||
<button onclick="bookPose('pages'); bookOpen(5);">Spread 2</button>
|
||||
<button onclick="bookPose('pages'); bookOpen(6);">3</button>
|
||||
<button onclick="bookPose('pages'); bookOpen(7);">4</button>
|
||||
</div>
|
||||
</main>
|
||||
<button onclick="bookPose('pages'); bookOpen(4);">Intro</button>
|
||||
<button onclick="bookPose('pages'); bookOpen(5);">Days 1 & 2</button>
|
||||
<button onclick="bookPose('pages'); bookOpen(6);">Days 3 & 4</button>
|
||||
</div>
|
||||
<script>
|
||||
let $ = query => Array.from(document.querySelectorAll(query));
|
||||
let pages = $("[swing]");
|
||||
let table = $(".Shot")[0];
|
||||
let bookOpen = index =>
|
||||
{
|
||||
let $ = query => Array.from(document.querySelectorAll(query));
|
||||
let pages = $("[swing]");
|
||||
let table = $(".Shot")[0];
|
||||
let bookOpen = index =>
|
||||
{
|
||||
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
|
||||
};
|
||||
let bookClose = () =>
|
||||
{
|
||||
};
|
||||
let bookClose = () =>
|
||||
{
|
||||
pages.forEach(p=>p.setAttribute("swing", "closed"));
|
||||
};
|
||||
let bookPose = inPanel =>
|
||||
{
|
||||
};
|
||||
let bookPose = inPanel =>
|
||||
{
|
||||
table.setAttribute("show", inPanel);
|
||||
bookClose();
|
||||
};
|
||||
};
|
||||
</script>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user