frame added to main project
This commit is contained in:
parent
f0e63330ce
commit
88bfdffc45
209
index.html
209
index.html
@ -742,6 +742,164 @@ Video.Init = function()
|
|||||||
<a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
|
<a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
|
||||||
<span>$10.00 (free shipping)</span>
|
<span>$10.00 (free shipping)</span>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.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="Shot" show="cover">
|
||||||
<div class="Book">
|
<div class="Book">
|
||||||
<img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
|
<img style="display:block; height:100%; width:auto; visibility: visible;" src="book-panel-spine.jpg"/>
|
||||||
@ -765,14 +923,50 @@ Video.Init = function()
|
|||||||
</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(4);">Intro</button>
|
|
||||||
<button onclick="bookPose('pages'); bookOpen(5);">Days 1 & 2</button>
|
|
||||||
<button onclick="bookPose('pages'); bookOpen(6);">Days 3 & 4</button>
|
|
||||||
</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>
|
||||||
|
|
||||||
|
<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>
|
</div>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
@ -911,4 +1105,5 @@ playerInterview = Video.Player('PlayerInterview', 'wEkSWh2_yM4');
|
|||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user