frame added to main project
This commit is contained in:
parent
f0e63330ce
commit
88bfdffc45
249
index.html
249
index.html
@ -742,37 +742,231 @@ Video.Init = function()
|
||||
<a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
|
||||
<span>$10.00 (free shipping)</span>
|
||||
<div>
|
||||
<div class="Shot" show="cover">
|
||||
<div class="Book">
|
||||
<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-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>
|
||||
<style>
|
||||
|
||||
<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>
|
||||
.frame
|
||||
{
|
||||
position:relative;
|
||||
padding:20px;
|
||||
border-bottom: none;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
.frame__image
|
||||
{
|
||||
position:relative;
|
||||
z-index:20;
|
||||
margin-bottom:19px;
|
||||
}
|
||||
|
||||
.frame__bar
|
||||
{
|
||||
position:relative;
|
||||
bottom:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:44px;
|
||||
overflow:hidden;
|
||||
transform-origin: center 22.5px;
|
||||
}
|
||||
.frame__bar span
|
||||
{
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: -10.5px;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 5px solid #000;
|
||||
border-right-color: transparent;
|
||||
border-bottom-color: transparent;
|
||||
transform: translate(-50%, 20px) rotate(45deg);
|
||||
transition: left 0.4s;
|
||||
}
|
||||
.frame__bar span::before, .frame__bar span::after
|
||||
{
|
||||
content: " ";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 1000px;
|
||||
height:0px;
|
||||
border-top: 5px solid black;
|
||||
transform:rotate(-45deg);
|
||||
}
|
||||
.frame__bar span::before
|
||||
{
|
||||
bottom: -0.5px;
|
||||
right: 20px;
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
.frame__bar span::after
|
||||
{
|
||||
top: -4px;
|
||||
left: 17px;
|
||||
transform-origin: left top;
|
||||
}
|
||||
.frame__bar--down
|
||||
{
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
.frame__bar--up
|
||||
{
|
||||
transform: scaleY(1);
|
||||
}
|
||||
.frame__bar--1-3 span
|
||||
{
|
||||
left:16.6%;
|
||||
}
|
||||
.frame__bar--2-3 span
|
||||
{
|
||||
left:50%;
|
||||
}
|
||||
.frame__bar--3-3 span
|
||||
{
|
||||
left:83%;
|
||||
}
|
||||
|
||||
.frame__bracket
|
||||
{
|
||||
position:relative;
|
||||
display:block;
|
||||
width:100%;
|
||||
height:0px;
|
||||
top:-200px;
|
||||
z-index:10;
|
||||
border-top:5px solid black;
|
||||
}
|
||||
.frame__bracket::before, .frame__bracket::after
|
||||
{
|
||||
content:" ";
|
||||
display:block;
|
||||
width:15px;
|
||||
height:171px;
|
||||
position:absolute;
|
||||
top:-5px;
|
||||
border:5px solid black;
|
||||
}
|
||||
.frame__bracket::before
|
||||
{
|
||||
left:-20px;
|
||||
}
|
||||
.frame__bracket::after
|
||||
{
|
||||
right:-20px;
|
||||
}
|
||||
|
||||
.frame__button
|
||||
{
|
||||
position:relative;
|
||||
display:block;
|
||||
float:left;
|
||||
padding:5px 0px 5px 0px;
|
||||
box-sizing: border-box;
|
||||
width:33.3%;
|
||||
text-align:center;
|
||||
text-transform: uppercase;
|
||||
cursor:pointer;
|
||||
}
|
||||
.frame__button:hover::before
|
||||
{
|
||||
content: " ";
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: black;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
left: 50%;
|
||||
transform: translateX(-5px) rotate(45deg);
|
||||
transition: top 0.4s, bottom 0.4s;
|
||||
}
|
||||
.frame__button--upper:hover::before
|
||||
{
|
||||
top:auto;
|
||||
bottom:-9px;
|
||||
}
|
||||
.frame__button[data-frame-active='true']:hover::before
|
||||
{
|
||||
bottom:auto;
|
||||
top: -30px;
|
||||
}
|
||||
.frame__button--upper[data-frame-active='true']:hover::before
|
||||
{
|
||||
bottom: -26px;
|
||||
top:auto;
|
||||
}
|
||||
</style>
|
||||
<div class="frame">
|
||||
<div class="frame__image">
|
||||
|
||||
<div class="Shot" show="cover">
|
||||
<div class="Book">
|
||||
<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-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 class="frame__button frame__button--upper" onclick="bookPose('cover'); bookClose();">Cover</div><div class="frame__button frame__button--upper" onclick="bookPose('spine'); bookClose();">Spine </div><div class="frame__button frame__button--upper" onclick="bookPose('back'); bookClose();">Back</div>
|
||||
|
||||
<div class="frame__bar"><span></span></div>
|
||||
<div class="frame__bracket"></div>
|
||||
|
||||
<div class="frame__button" onclick="bookPose('pages'); bookOpen(4);">Intro</div><div class="frame__button" onclick="bookPose('pages'); bookOpen(5);">1 & 2</div><div class="frame__button" onclick="bookPose('pages'); bookOpen(6);">3 & 4</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(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>
|
||||
function frame__setup(inFrame)
|
||||
{
|
||||
var buttons = inFrame.querySelectorAll(".frame__button");
|
||||
var bar = inFrame.querySelector(".frame__bar");
|
||||
var active = false;
|
||||
|
||||
function activate(inButton)
|
||||
{
|
||||
var index = parseInt(inButton.getAttribute("data-frame-index"));
|
||||
var classX = "frame__bar--" + ((index % 3)+1) + "-3";
|
||||
var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
|
||||
|
||||
bar.setAttribute("class", "frame__bar " + classX + " " + classY);
|
||||
|
||||
if(active)
|
||||
{
|
||||
active.setAttribute("data-frame-active", "false");
|
||||
}
|
||||
active = inButton;
|
||||
inButton.setAttribute("data-frame-active", "true");
|
||||
}
|
||||
for(var i=0; i<buttons.length; i++)
|
||||
{
|
||||
buttons[i].setAttribute("data-frame-index", i);
|
||||
buttons[i].setAttribute("data-frame-active", "false");
|
||||
buttons[i].addEventListener("click", function(){ activate(this); });
|
||||
}
|
||||
|
||||
activate( buttons[0] );
|
||||
}
|
||||
|
||||
frame__setup(document.querySelector(".frame"));
|
||||
</script>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -911,4 +1105,5 @@ playerInterview = Video.Player('PlayerInterview', 'wEkSWh2_yM4');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user