2021-08-10 16:53:55 -04:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
2021-08-11 17:33:00 -04:00
|
|
|
|
2021-08-11 09:35:40 -04:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main>
|
2021-08-10 16:53:55 -04:00
|
|
|
|
2021-08-11 13:29:50 -04:00
|
|
|
<style>
|
2021-08-11 17:33:00 -04:00
|
|
|
.Shot
|
2021-08-11 13:29:50 -04:00
|
|
|
{
|
2021-08-12 09:27:43 -04:00
|
|
|
transform: perspective(1000px);
|
2021-08-11 13:29:50 -04:00
|
|
|
transform-style: preserve-3d;
|
2021-08-11 17:13:04 -04:00
|
|
|
width:500px;
|
|
|
|
|
height: 400px;
|
|
|
|
|
margin:20px auto 0 auto;
|
|
|
|
|
text-align:center;
|
2021-08-11 17:33:00 -04:00
|
|
|
transition: transform 1s;
|
|
|
|
|
}
|
2021-08-12 18:14:47 -04:00
|
|
|
.Shot[show="cover"]{ transform: perspective(800px) rotateX(-15deg) rotateY(110deg); }
|
|
|
|
|
.Shot[show="spine"]{ transform: perspective(2000px) rotateX(0deg) rotateY(180deg); }
|
2021-08-12 15:30:14 -04:00
|
|
|
.Shot[show="back" ]{ transform: perspective(1000px) rotateX(-30deg) rotateY(-60deg); }
|
2021-08-12 18:14:47 -04:00
|
|
|
.Shot[show="pages"]{ transform: perspective(800px) rotateX(-7deg) rotateY(0deg); }
|
2021-08-11 17:33:00 -04:00
|
|
|
|
2021-08-11 17:13:04 -04:00
|
|
|
.Book
|
|
|
|
|
{
|
2021-08-12 09:27:43 -04:00
|
|
|
height:100%;
|
2021-08-11 17:13:04 -04:00
|
|
|
transform-style: preserve-3d;
|
2021-08-12 12:34:42 -04:00
|
|
|
transform: translateZ(-100px);
|
2021-08-11 17:13:04 -04:00
|
|
|
position: relative;
|
|
|
|
|
display:inline-block;
|
2021-08-11 13:29:50 -04:00
|
|
|
}
|
|
|
|
|
.Spine
|
|
|
|
|
{
|
|
|
|
|
display:flex;
|
|
|
|
|
justify-content:space-between;
|
|
|
|
|
margin:0 auto;
|
2021-08-11 17:13:04 -04:00
|
|
|
position:absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
2021-08-11 13:29:50 -04:00
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
|
|
|
|
|
.Page
|
2021-08-11 13:29:50 -04:00
|
|
|
{
|
2021-08-12 17:58:06 -04:00
|
|
|
display: inline-block;
|
|
|
|
|
position: relative;
|
|
|
|
|
transition: transform 1s;
|
2021-08-11 13:29:50 -04:00
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
.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
|
2021-08-11 13:29:50 -04:00
|
|
|
{
|
|
|
|
|
float:left;
|
2021-08-12 17:58:06 -04:00
|
|
|
position:absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
height:100%;
|
|
|
|
|
backface-visibility: hidden;
|
|
|
|
|
transform-style: preserve-3d;
|
|
|
|
|
transform: rotateY(180deg);
|
2021-08-11 13:29:50 -04:00
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
.Page .Back
|
2021-08-11 13:29:50 -04:00
|
|
|
{
|
2021-08-12 17:58:06 -04:00
|
|
|
transform: rotateY(0deg);
|
2021-08-11 13:29:50 -04:00
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
.Page img
|
2021-08-11 13:29:50 -04:00
|
|
|
{
|
|
|
|
|
height:100%;
|
|
|
|
|
width:auto;
|
|
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
|
|
|
|
|
.Page--Fill
|
2021-08-11 13:29:50 -04:00
|
|
|
{
|
2021-08-12 17:58:06 -04:00
|
|
|
display: block;
|
2021-08-11 13:29:50 -04:00
|
|
|
position:absolute;
|
|
|
|
|
top:0;
|
|
|
|
|
left:0;
|
2021-08-12 17:58:06 -04:00
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
2021-08-12 15:30:14 -04:00
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
.Page--Shrink
|
2021-08-12 15:30:14 -04:00
|
|
|
{
|
2021-08-12 17:58:06 -04:00
|
|
|
height:98%;
|
|
|
|
|
top:1%;
|
2021-08-11 13:29:50 -04:00
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
.Shadow--Drop::before
|
|
|
|
|
{
|
2021-08-12 18:14:47 -04:00
|
|
|
transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
|
|
|
|
|
box-shadow: 0px 100px 60px black, 0px 100px 17px black;
|
|
|
|
|
display: block;
|
2021-08-12 17:58:06 -04:00
|
|
|
position: absolute;
|
|
|
|
|
top: 100%;
|
|
|
|
|
content: " ";
|
|
|
|
|
width: 100%;
|
2021-08-12 18:14:47 -04:00
|
|
|
height: 8px;
|
|
|
|
|
border-radius: 39px;
|
2021-08-12 17:58:06 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.Shadow--Sheet::after
|
2021-08-11 13:29:50 -04:00
|
|
|
{
|
|
|
|
|
content:" ";
|
|
|
|
|
|
2021-08-12 12:34:42 -04:00
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-position: 0px 0px;
|
|
|
|
|
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
|
2021-08-11 13:29:50 -04:00
|
|
|
|
|
|
|
|
display:block;
|
|
|
|
|
position:absolute;
|
2021-08-12 15:30:14 -04:00
|
|
|
z-index:100;
|
2021-08-11 13:29:50 -04:00
|
|
|
top:0;
|
|
|
|
|
left:0;
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
|
|
|
|
|
|
|
|
|
backface-visibility: hidden;
|
2021-08-12 17:58:06 -04:00
|
|
|
transform:scaleX(-1);
|
2021-08-11 13:29:50 -04:00
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
.Shadow--Sheet--Flip::after
|
2021-08-11 13:29:50 -04:00
|
|
|
{
|
2021-08-12 17:58:06 -04:00
|
|
|
transform:scaleX(1);
|
2021-08-11 13:29:50 -04:00
|
|
|
}
|
2021-08-12 17:58:06 -04:00
|
|
|
|
|
|
|
|
.Shadow--Radiosity::after
|
2021-08-12 12:34:42 -04:00
|
|
|
{
|
|
|
|
|
content: " ";
|
|
|
|
|
background-size: 100% 100%;
|
|
|
|
|
background-position: 0px 0px;
|
|
|
|
|
background-image: radial-gradient(188% 24% at 50% 82%, #ffffff52 0%, #0000 100%);
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: 0;
|
|
|
|
|
left: 0;
|
2021-08-12 15:30:14 -04:00
|
|
|
z-index:100;
|
2021-08-12 12:34:42 -04:00
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
2021-08-11 13:29:50 -04:00
|
|
|
</style>
|
|
|
|
|
|
2021-08-12 12:34:42 -04:00
|
|
|
<div class="Shot" show="cover">
|
2021-08-12 11:02:17 -04:00
|
|
|
<div class="Book">
|
2021-08-12 17:58:06 -04:00
|
|
|
<img style="display:block; height:100%; width:auto; visibility: hidden;" src="book-panel-spine.jpg"/>
|
2021-08-12 18:14:47 -04:00
|
|
|
<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>
|
2021-08-12 17:58:06 -04:00
|
|
|
<div class="Spine">
|
2021-08-12 18:14:47 -04:00
|
|
|
<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>
|
2021-08-12 17:58:06 -04:00
|
|
|
<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>
|
2021-08-12 18:14:47 -04:00
|
|
|
<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>
|
2021-08-12 17:58:06 -04:00
|
|
|
<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>
|
2021-08-12 18:14:47 -04:00
|
|
|
<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>
|
2021-08-11 17:13:04 -04:00
|
|
|
</div>
|
2021-08-12 17:58:06 -04:00
|
|
|
|
2021-08-11 13:29:50 -04:00
|
|
|
</div>
|
2021-08-11 09:35:40 -04:00
|
|
|
</div>
|
2021-08-10 16:53:55 -04:00
|
|
|
|
2021-08-11 17:33:00 -04:00
|
|
|
<div>
|
2021-08-12 15:30:14 -04:00
|
|
|
<button onclick="bookPose('cover'); bookClose();">Front</button>
|
2021-08-11 17:33:00 -04:00
|
|
|
<button onclick="bookPose('spine'); bookClose();">Spine</button>
|
|
|
|
|
<button onclick="bookPose('back'); bookClose();">Back</button>
|
2021-08-12 15:30:14 -04:00
|
|
|
<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>
|
2021-08-11 17:33:00 -04:00
|
|
|
<button onclick="bookPose('pages'); bookOpen(6);">3</button>
|
|
|
|
|
<button onclick="bookPose('pages'); bookOpen(7);">4</button>
|
|
|
|
|
</div>
|
2021-08-11 09:35:40 -04:00
|
|
|
</main>
|
2021-08-10 16:53:55 -04:00
|
|
|
<script>
|
2021-08-11 17:33:00 -04:00
|
|
|
let $ = query => Array.from(document.querySelectorAll(query));
|
|
|
|
|
let pages = $("[swing]");
|
2021-08-12 11:02:17 -04:00
|
|
|
let table = $(".Shot")[0];
|
2021-08-11 17:33:00 -04:00
|
|
|
let bookOpen = index =>
|
|
|
|
|
{
|
|
|
|
|
pages.forEach((p, i)=> p.setAttribute("swing", i>index ? "right" : "left") );
|
|
|
|
|
};
|
|
|
|
|
let bookClose = () =>
|
|
|
|
|
{
|
|
|
|
|
pages.forEach(p=>p.setAttribute("swing", "closed"));
|
|
|
|
|
};
|
|
|
|
|
let bookPose = inPanel =>
|
|
|
|
|
{
|
|
|
|
|
table.setAttribute("show", inPanel);
|
|
|
|
|
bookClose();
|
|
|
|
|
};
|
2021-08-10 16:53:55 -04:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
