526 lines
246 KiB
HTML
526 lines
246 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Brandon';
|
||
|
|
src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGICUwgwcAAAzkAACOuEdQT1Ov0QG0AACphAAAtDpHU1VCEG3ByQAAo3QAAAYQT1MvMn3maH8AAAEgAAAAYGNtYXC5Mp3YAAAG8AAABdRoZWFk8gfzawAAALwAAAA2aGhlYQfABEUAAAD0AAAAJGhtdHjKglH0AACbnAAAB9htYXhwAfZQAAAAARgAAAAGbmFtZRwzR1oAAAGAAAAFb3Bvc3T/uAAyAAAMxAAAACAAAQAAAAEAAFrKgzdfDzz1AAMD6AAAAADHptf+AAAAAMem1/7/dP6EBC8ECwAAAAMAAgAAAAAAAAABAAAEGv6EAAAEYf90/2kELwABAAAAAAAAAAAAAAAAAAAB9gAAUAAB9gAAAAIB7gGkAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAACCwYDAgIDBgICoAAAL1AAIFsAAAAAAAAAAEhWRAAAAAAg+wICvP7UAV4EGgF8IAAAmwAAAAABkAK8AAAAIAADAAAAHAFWAAEAAAAAAAAAPgAAAAEAAAAAAAEAEQA+AAEAAAAAAAIABgBPAAEAAAAAAAMAKQBVAAEAAAAAAAQAGAB+AAEAAAAAAAUADwCWAAEAAAAAAAYAFwClAAEAAAAAAAcANwC8AAEAAAAAAAgAEgDzAAEAAAAAAAkAEgDzAAEAAAAAAAoAPQEFAAEAAAAAAAwAFwFCAAEAAAAAABAAEQA+AAEAAAAAABEABgBPAAMAAQQJAAAAfAFZAAMAAQQJAAEAMAHVAAMAAQQJAAIADgIFAAMAAQQJAAMAUgITAAMAAQQJAAQALgJlAAMAAQQJAAUAHgKTAAMAAQQJAAYALgJlAAMAAQQJAAcAbgKxAAMAAQQJAAgAJAMfAAMAAQQJAAkAJAMfAAMAAQQJAAoAegNDAAMAAQQJAAwALgO9AAMAAQQJABAAIgPrAAMAAQQJABEADAQNQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRG9laHJlbi4gQWxsIHJpZ2h0cyByZXNlcnZlZC5CcmFuZG9uIEdyb3Rlc3F1ZU1lZGl1bUhhbm5lc3ZvbkRvZWhyZW46IEJyYW5kb24gR3JvdGVzcXVlOiAyMDA5QnJhbmRvbiBHcm90ZXNxdWUgTWVkaXVtVmVyc2lvbiAwMDEuMDAwQnJhbmRvbkdyb3Rlc3F1ZS1NZWRpdW1CcmFuZG9uIEdyb3Rlc3F1ZSBpcyBhIHRyYWRlbWFyayBvZiBIYW5uZXMgdm9uIERvZWhyZW4uSGFubmVzIHZvbiBEb2VocmVuQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRJpocmVuLiBBbGwgcmlnaHRzIHJlc2VydmVkLmh0dHA6Ly93d3cuaHZkZm9udHMuY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA5ACAAYgB5ACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUAIABNAGUAZABpAHUAbQBSAGUAZwB1AGwAYQByAEgAYQBuAG4AZQBzAHYAbwBuAEQAbwBlAGgAcgBlAG4AOgAgAEIAcgBhAG4AZABvAG4AIABHAHIAbwB0AGUAcwBxAHUAZQA6ACAAMgAwADAAOQBCAHIAYQBuAGQAbwBuAEcAcgBvAHQAZQBzAHEAdQBlAC0ATQBlAGQAaQB1AG0AVgBlAHIAcwBpAG8AbgAgADAAMAAxAC4AMAAwADAAQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlACAAaQBzACAAYQAgAHQAcgBhAGQAZQBtAGEAcgBrACAAbwBmACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgBIAGEAbgBuAGUAcwAgAHYAbwBuACAARABvAGUAaAByAGUAbgBDAG8AcAB5AHIAaQBnAGgAdAAgACgAYwApACAAMgAwADAAOQAgAGIAeQAgAEgAYQBuAG4AZQBzACAAdgBvAG4AIABEAJoAaAByAGUAbgAuACAAQQBsAGwAIAByAGkAZwBoAHQAcwAgAHIAZQBzAGUAcgB2AGUAZAAuAGgAdAB0AHAAOgAvAC8AdwB3AHcALgBoAHYAZABmAG8AbgB0AHMALgBjAG8AbQBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUATQBlAGQAaQB1AG0AAAAAAwAAAAMAAAIUAAEAAAAAABwAAwABAAACFAAGAfgAAAAJAPcAAwAAAAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMABAAFAAYABwAIAAkACgALAAwADQAOAA8AEAARABIAEwAUABUAFgAXABgAGQAaABsAHAAdAB4AHwAgACEAIgAjACQAJQAmACcAKAApACoAKwAsAC0ALgAvADAAMQAyADMANAA1ADYANwA4ADkAOgA7ADwAPQA+AD8AQABBAEIAQwBEAEUARgBHAEgASQBKAEsATABNAE4ATwBQAFEAUgBTAFQAVQBWAFcAWABZAFoAWwBcAF0AXgBfAGAAYQAAAGcAagBzAHgAmACeALYAyADHAMkAywDKAM4A1wDcANsA3QDfAOwA6wDuAPAA/gECAQEBAwEFAQQBGwEaARwBHgFnAZYBcQFyAWkBZAFqARQBbQFsAW4BNwFAAYoAbQCiAZsBhwGMAY0BdAGTAZwBnwGgAZUBnQF1AXYBkgDRAQkBVwFWAY4BngFzAYsBjwFgAWEBVABiAGMAZgCdAKQBCwFiAWMBWgFbAVgBWQGJAaEBKgDCAXoBcAFeAV8BMQEyAWgBZQFcAV0BhQBlAHkAZAB7AHcAhwCJAIsAhgCbAJwBogCaALMAtACyAOoBOQE+AUIBRQFLAUcBTQFJAU8BOwAEA8AAAAByAEAABQAyAH4AvwDEANEA1gDfAOQA8QD2AX4BkgH/AhsCNwLHAskC3QOUA6kDvAPAHoUe8yAUIBogHiAiICYgMCA6IEQgcCB5IIkgrCETISIhJiEuIVQhWyFeIgIiBiIPIhIiFSIaIh4iKyJIImAiZSXK+P/7Av//AAAAIACgAMAAxQDSANcA4ADlAPIA9wGSAfoCGAI3AsYCyQLYA5QDqQO8A8AegB7yIBMgGCAcICAgJiAwIDkgRCBwIHQggCCsIRMhIiEmIS4hUyFbIVwiAiIGIg8iESIVIhkiHiIrIkgiYCJkJcr4//sB////4wAA/6MAAP/IAAD/5wAAAA8AAP/hAAAAAP68AAD+ewAA/fz96f3Y/dUAAAAA4U8AAAAAAADhLuFV4SXhNuE94TrhNODE4ITgTOBr4GoAAOAk4Cbfmt+J35EAAN9mAADffd9y30PfKt8o29cIowYwAAEAAABwAAAArAAAAMIAAADQAAAA5gAAAfIB/AAAAgAAAAIAAAAAAAAAAAACAgIMAAACDAIQAhQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAB+AAAAfgAAAAAAAAAAAAAAAAAAAAAAAAAYgFWAXEBcgFvAXQB9QFpAUABbAF1AWABjgFVAW0BQgGWAYcBeAF5ATcBkwFqAWUBTQF3AXYBYQF+AXwBgQFXAGoAbQBzAHcAeAB5AHsAhgCHAIkAiwB2AJgBiACiALIAswC0ALYAwACxARQAzgDRANcA2wDcAN0A3wDrAOwA7gDwANoA/gGJAQkBGgEbARwBHgEoARkBKgBoAMwAaQDNAGwA0ABvANMAcADUAHIA1gBxANUAdADYAHUA2QB8AOAAfQDhAH4A4gB/AOMAegDeAIAA5ACBAOUAggDmAIMA5wCEAOgAhQDpAIoA7wCMAPEAiADtAI4A8gCNAOoBL
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'Brandon';
|
||
|
|
font-weight: 600;
|
||
|
|
src: url(data:application/octet-stream;base64,T1RUTwALAIAAAwAwQ0ZGIMcAUZEAAAzUAACNvEdQT1Po0n3mAACoZAAAtuRHU1VCEhvDwgAAolQAAAYQT1MvMn4EaoMAAAEgAAAAYGNtYXC5J53YAAAG4AAABdRoZWFk8h7zTQAAALwAAAA2aGhlYQfXBEYAAAD0AAAAJGhtdHi/hknUAACakAAAB8RtYXhwAfZQAAAAARgAAAAGbmFtZVPRFYoAAAGAAAAFXXBvc3T/uAAyAAAMtAAAACAAAQAAAAEAAEgGW9NfDzz1AAMD6AAAAADHptftAAAAAMem1+3/Y/6ABFcEEwAAAAMAAgAAAAAAAAABAAAEGv6EAAAEe/9j/1oEVwABAAAAAAAAAAAAAAAAAAAB7AAAUAAB9gAAAAIB8gHCAAUAAAK8AooAAACMArwCigAAAd0AMgD6AAACCwgDAgIDBgICoAAAL1AAIFsAAAAAAAAAAEhWRAAAAAAg+wICvP7UAV4EGgF8IAAAmwAAAAABkAK8AAAAIAADAAAAHAFWAAEAAAAAAAAAPgAAAAEAAAAAAAEAEQA+AAEAAAAAAAIABABPAAEAAAAAAAMAKQBTAAEAAAAAAAQAFgB8AAEAAAAAAAUADwCSAAEAAAAAAAYAFQChAAEAAAAAAAcANwC2AAEAAAAAAAgAEgDtAAEAAAAAAAkAEgDtAAEAAAAAAAoAPQD/AAEAAAAAAAwAFwE8AAEAAAAAABAAEQA+AAEAAAAAABEABABPAAMAAQQJAAAAfAFTAAMAAQQJAAEALAHPAAMAAQQJAAIADgH7AAMAAQQJAAMAUgIJAAMAAQQJAAQAKgJbAAMAAQQJAAUAHgKFAAMAAQQJAAYAKgJbAAMAAQQJAAcAbgKjAAMAAQQJAAgAJAMRAAMAAQQJAAkAJAMRAAMAAQQJAAoAegM1AAMAAQQJAAwALgOvAAMAAQQJABAAIgPdAAMAAQQJABEACAP/Q29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRG9laHJlbi4gQWxsIHJpZ2h0cyByZXNlcnZlZC5CcmFuZG9uIEdyb3Rlc3F1ZUJvbGRIYW5uZXN2b25Eb2VocmVuOiBCcmFuZG9uIEdyb3Rlc3F1ZTogMjAwOUJyYW5kb24gR3JvdGVzcXVlIEJvbGRWZXJzaW9uIDAwMS4wMDBCcmFuZG9uR3JvdGVzcXVlLUJvbGRCcmFuZG9uIEdyb3Rlc3F1ZSBpcyBhIHRyYWRlbWFyayBvZiBIYW5uZXMgdm9uIERvZWhyZW4uSGFubmVzIHZvbiBEb2VocmVuQ29weXJpZ2h0IChjKSAyMDA5IGJ5IEhhbm5lcyB2b24gRJpocmVuLiBBbGwgcmlnaHRzIHJlc2VydmVkLmh0dHA6Ly93d3cuaHZkZm9udHMuY29tAEMAbwBwAHkAcgBpAGcAaAB0ACAAKABjACkAIAAyADAAMAA5ACAAYgB5ACAASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBCAHIAYQBuAGQAbwBuACAARwByAG8AdABlAHMAcQB1AGUAIABCAG8AbABkAFIAZQBnAHUAbABhAHIASABhAG4AbgBlAHMAdgBvAG4ARABvAGUAaAByAGUAbgA6ACAAQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlADoAIAAyADAAMAA5AEIAcgBhAG4AZABvAG4ARwByAG8AdABlAHMAcQB1AGUALQBCAG8AbABkAFYAZQByAHMAaQBvAG4AIAAwADAAMQAuADAAMAAwAEIAcgBhAG4AZABvAG4AIABHAHIAbwB0AGUAcwBxAHUAZQAgAGkAcwAgAGEAIAB0AHIAYQBkAGUAbQBhAHIAawAgAG8AZgAgAEgAYQBuAG4AZQBzACAAdgBvAG4AIABEAG8AZQBoAHIAZQBuAC4ASABhAG4AbgBlAHMAIAB2AG8AbgAgAEQAbwBlAGgAcgBlAG4AQwBvAHAAeQByAGkAZwBoAHQAIAAoAGMAKQAgADIAMAAwADkAIABiAHkAIABIAGEAbgBuAGUAcwAgAHYAbwBuACAARACaAGgAcgBlAG4ALgAgAEEAbABsACAAcgBpAGcAaAB0AHMAIAByAGUAcwBlAHIAdgBlAGQALgBoAHQAdABwADoALwAvAHcAdwB3AC4AaAB2AGQAZgBvAG4AdABzAC4AYwBvAG0AQgByAGEAbgBkAG8AbgAgAEcAcgBvAHQAZQBzAHEAdQBlAEIAbwBsAGQAAAAAAAADAAAAAwAAAhQAAQAAAAAAHAADAAEAAAIUAAYB+AAAAAkA9wADAAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAEAAUABgAHAAgACQAKAAsADAANAA4ADwAQABEAEgATABQAFQAWABcAGAAZABoAGwAcAB0AHgAfACAAIQAiACMAJAAlACYAJwAoACkAKgArACwALQAuAC8AMAAxADIAMwA0ADUANgA3ADgAOQA6ADsAPAA9AD4APwBAAEEAQgBDAEQARQBGAEcASABJAEoASwBMAE0ATgBPAFAAUQBSAFMAVABVAFYAVwBYAFkAWgBbAFwAXQBeAF8AYABhAAAAZwBqAHMAeACYAJ4AtgDIAMcAyQDLAMoAzgDXANwA2wDdAN8A7ADrAO4A8AD+AQIBAQEDAQUBBAEbARoBHAEeAWcBlgFxAXIBaQFkAWoBFAFtAWwBbgE3AUABigBtAKIBmwGHAYwBjQF0AZMBnAGfAaABlQGdAXUBdgGSANEBCQFXAVYBjgGeAXMBiwGPAWABYQFUAGIAYwBmAJ0ApAELAWIBYwFaAVsBWAFZAYkBoQEqAMIBegFwAV4BXwExATIBaAFlAVwBXQGFAGUAeQBkAHsAdwCHAIkAiwCGAJsAnAGiAJoAswC0ALIA6gE5AT4BQgFFAUsBRwFNAUkBTwE7AAQDwAAAAHIAQAAFADIAfgC/AMQA0QDWAN8A5ADxAPYBfgGSAf8CGwI3AscCyQLdA5QDqQO8A8AehR7zIBQgGiAeICIgJiAwIDogRCBwIHkgiSCsIRMhIiEmIS4hVCFbIV4iAiIGIg8iEiIVIhoiHiIrIkgiYCJlJcr4//sC//8AAAAgAKAAwADFANIA1wDgAOUA8gD3AZIB+gIYAjcCxgLJAtgDlAOpA7wDwB6AHvIgEyAYIBwgICAmIDAgOSBEIHAgdCCAIKwhEyEiISYhLiFTIVshXCICIgYiDyIRIhUiGSIeIisiSCJgImQlyvj/+wH////jAAD/owAA/8gAAP/nAAAADwAA/+EAAAAA/rwAAP57AAD9/P3p/dj91QAAAADhTwAAAAAAAOEu4VXhJeE24T3hOuE04MTghOBM4GvgagAA4CTgJt+a34nfkQAA32YAAN9933LfQ98q3yjb1wijBjAAAQAAAHAAAACsAAAAwgAAANAAAADmAAAB8gH8AAACAAAAAgAAAAAAAAAAAAICAgwAAAIMAhACFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAH4AAAB+AAAAAAAAAAAAAAAAAAAAAAAAABiAVYBcQFyAW8BdAHqAWkBQAFsAXUBYAGOAVUBbQFCAZYBhwF4AXkBNwGTAWoBZQFNAXcBdgFhAX4BfAGBAVcAagBtAHMAdwB4AHkAewCGAIcAiQCLAHYAmAGIAKIAsgCzALQAtgDAALEBFADOANEA1wDbANwA3QDfAOsA7ADuAPAA2gD+AYkBCQEaARsBHAEeASgBGQEqAGgAzABpAM0AbADQAG8A0wBwANQAcgDWAHEA1QB0ANgAdQDZAHwA4AB9AOEAfgDiAH8A4wB6AN4AgADkAIEA5QCCAOYAgwDnAIQA6ACFAOkAigDvAIwA8QCIAO0AjgDyAI0A6gEvATAAjwD0AJAA9QD2AJEA9
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style>
|
||
|
|
body
|
||
|
|
{
|
||
|
|
margin:0;
|
||
|
|
font-family: Brandon, Centrury Gothic, sans-serif;
|
||
|
|
font-size:1rem;
|
||
|
|
}
|
||
|
|
section
|
||
|
|
{
|
||
|
|
position:relative;
|
||
|
|
height: 100vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding:50px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
h2
|
||
|
|
{
|
||
|
|
display:flex;
|
||
|
|
align-items: center;
|
||
|
|
box-sizing:border-box;
|
||
|
|
width:500px;
|
||
|
|
margin:0 auto;
|
||
|
|
padding:5px 20px 5px 20px;
|
||
|
|
text-align:center;
|
||
|
|
text-transform:uppercase;
|
||
|
|
font-size:36px;
|
||
|
|
}
|
||
|
|
h2 > span
|
||
|
|
{
|
||
|
|
position: relative;
|
||
|
|
flex:1;
|
||
|
|
}
|
||
|
|
h2 > span:first-child::before, h2 > span:last-child::before
|
||
|
|
{
|
||
|
|
content: "⬦";
|
||
|
|
line-height: 7px;
|
||
|
|
font-size: 60px;
|
||
|
|
text-indent:-37px;
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
top: -2px;
|
||
|
|
width: 0%;
|
||
|
|
height: 5px;
|
||
|
|
background: #000;
|
||
|
|
transition: width 0.4s;
|
||
|
|
}
|
||
|
|
h2 > span:first-child::before
|
||
|
|
{
|
||
|
|
text-align:left;
|
||
|
|
direction:ltr;
|
||
|
|
right: 0;
|
||
|
|
}
|
||
|
|
h2 > span:last-child::before
|
||
|
|
{
|
||
|
|
text-align:right;
|
||
|
|
direction:rtl;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before
|
||
|
|
{
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.CTA
|
||
|
|
{
|
||
|
|
position:relative;
|
||
|
|
display:inline-block;
|
||
|
|
padding:5px 50px 5px 50px;
|
||
|
|
border:5px solid black;
|
||
|
|
text-decoration:none !important;
|
||
|
|
color: black;
|
||
|
|
text-transform:uppercase;
|
||
|
|
font-weight:lighter;
|
||
|
|
}
|
||
|
|
.CTA::before, .CTA::after
|
||
|
|
{
|
||
|
|
content:" ";
|
||
|
|
display:block;
|
||
|
|
position:absolute;
|
||
|
|
height:100%;
|
||
|
|
width:0px;
|
||
|
|
top:0;
|
||
|
|
}
|
||
|
|
.CTA::before
|
||
|
|
{
|
||
|
|
left:10px;
|
||
|
|
border-right:5px solid black;
|
||
|
|
transition:left 0.4s;
|
||
|
|
}
|
||
|
|
.CTA::after
|
||
|
|
{
|
||
|
|
right:10px;
|
||
|
|
border-left:5px solid black;
|
||
|
|
transition:right 0.4s;
|
||
|
|
}
|
||
|
|
.CTA:hover::before
|
||
|
|
{
|
||
|
|
left:-5px;
|
||
|
|
}
|
||
|
|
.CTA:hover::after
|
||
|
|
{
|
||
|
|
right:-5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
var Time =
|
||
|
|
{
|
||
|
|
Jobs:[],
|
||
|
|
Stamp:false,
|
||
|
|
Queue:false,
|
||
|
|
Loop:false,
|
||
|
|
Add:function(inJob)
|
||
|
|
{
|
||
|
|
if(Time.Loop)
|
||
|
|
{
|
||
|
|
console.log("cannot modify queue while processing");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if(!Time.Queue)
|
||
|
|
{
|
||
|
|
window.requestAnimationFrame(Time.Update);
|
||
|
|
}
|
||
|
|
Time.Queue = true;
|
||
|
|
Time.Jobs.push(inJob);
|
||
|
|
},
|
||
|
|
Remove:function(inJob)
|
||
|
|
{
|
||
|
|
if(Time.Loop)
|
||
|
|
{
|
||
|
|
console.log("cannot modify queue while processing");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var index = Time.Jobs.indexOf(inJob);
|
||
|
|
if(index > -1)
|
||
|
|
{
|
||
|
|
Time.Jobs.splice(index, 1);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
Update:function(inTimestamp)
|
||
|
|
{
|
||
|
|
var delta;
|
||
|
|
var i;
|
||
|
|
|
||
|
|
if(!Time.Stamp)
|
||
|
|
{
|
||
|
|
Time.Stamp = inTimestamp;
|
||
|
|
}
|
||
|
|
delta = inTimestamp - Time.Stamp;
|
||
|
|
Time.Stamp = inTimestamp;
|
||
|
|
|
||
|
|
Time.Loop = true;
|
||
|
|
for(i=0; i<Time.Jobs.length; i++)
|
||
|
|
{
|
||
|
|
if(Time.Jobs[i](delta) === false)
|
||
|
|
{
|
||
|
|
Time.Jobs.splice(i, 1);
|
||
|
|
i--;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
Time.Loop = false;
|
||
|
|
|
||
|
|
if(Time.Jobs.length > 0)
|
||
|
|
{
|
||
|
|
window.requestAnimationFrame(Time.Update);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
Time.Stamp = false;
|
||
|
|
Time.Queue = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<script>
|
||
|
|
var Spy =
|
||
|
|
{
|
||
|
|
Attribute:"data-spy",
|
||
|
|
Members:[],
|
||
|
|
Defaults:[0, 1, 0, 1],
|
||
|
|
Disabled:false,
|
||
|
|
Suspend:function()
|
||
|
|
{
|
||
|
|
Spy.Disabled = true;
|
||
|
|
},
|
||
|
|
Resume:function()
|
||
|
|
{
|
||
|
|
Spy.Disabled = false;
|
||
|
|
Spy.UpdateAll();
|
||
|
|
},
|
||
|
|
UpdateAll:function()
|
||
|
|
{
|
||
|
|
var i, member, aabb, top, bottom, left, right;
|
||
|
|
var visible;
|
||
|
|
|
||
|
|
if(Spy.Disabled){ return; }
|
||
|
|
|
||
|
|
for(i=0; i<Spy.Members.length; i++)
|
||
|
|
{
|
||
|
|
member = Spy.Members[i];
|
||
|
|
|
||
|
|
top = window.innerHeight * member.Bounds[0];
|
||
|
|
bottom = window.innerHeight * member.Bounds[1];
|
||
|
|
left = window.innerWidth * member.Bounds[2];
|
||
|
|
right = window.innerWidth * member.Bounds[3];
|
||
|
|
|
||
|
|
aabb = member.Element.getBoundingClientRect();
|
||
|
|
visible = (aabb.top < bottom && aabb.bottom > top) && (aabb.left < right && aabb.right > left);
|
||
|
|
if(visible != member.Visible)
|
||
|
|
{
|
||
|
|
member.Element.setAttribute(Spy.Attribute, visible);
|
||
|
|
member.Visible = visible;
|
||
|
|
member.Change(visible);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
Create:function(inElement)
|
||
|
|
{
|
||
|
|
var j, bounds;
|
||
|
|
var attr;
|
||
|
|
var obj;
|
||
|
|
attr = inElement.getAttribute(Spy.Attribute)||"";
|
||
|
|
inElement.removeAttribute(Spy.Attribute);
|
||
|
|
bounds = attr.split("|");
|
||
|
|
for(j=0; j<Spy.Defaults.length; j++)
|
||
|
|
{
|
||
|
|
if(bounds[j])
|
||
|
|
{
|
||
|
|
bounds[j] = parseFloat(bounds[j]);
|
||
|
|
}
|
||
|
|
else
|
||
|
|
{
|
||
|
|
bounds[j] = Spy.Defaults[j];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
obj = {
|
||
|
|
Element:inElement,
|
||
|
|
Bounds:bounds,
|
||
|
|
Visible:undefined,
|
||
|
|
Change:function(){}
|
||
|
|
};
|
||
|
|
Spy.Members.push(obj);
|
||
|
|
return obj;
|
||
|
|
},
|
||
|
|
CreateAll:function()
|
||
|
|
{
|
||
|
|
var i, elements;
|
||
|
|
elements = document.querySelectorAll("*["+Spy.Attribute+"]");
|
||
|
|
|
||
|
|
for(i=0; i<elements.length; i++)
|
||
|
|
{
|
||
|
|
Spy.Create(elements[i]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
Init:function()
|
||
|
|
{
|
||
|
|
Spy.CreateAll();
|
||
|
|
Spy.UpdateAll();
|
||
|
|
document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
|
||
|
|
window.addEventListener("resize", Spy.UpdateAll, {passive:true});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
nav
|
||
|
|
{
|
||
|
|
border: 20px solid #0000;
|
||
|
|
/* margin: 20px; */
|
||
|
|
/* padding: 20px; */
|
||
|
|
position: fixed;
|
||
|
|
display: block;
|
||
|
|
top: 0px;
|
||
|
|
right: 0px;
|
||
|
|
width: 200px;
|
||
|
|
z-index: 10;
|
||
|
|
height: 85px;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0px 3px 10px black;
|
||
|
|
transition: height 0.4s;
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
nav:hover{
|
||
|
|
height:100%;
|
||
|
|
}
|
||
|
|
nav > span.cap
|
||
|
|
{
|
||
|
|
display:block;
|
||
|
|
position:absolute;
|
||
|
|
left:0;
|
||
|
|
width:100%;
|
||
|
|
height:33px;
|
||
|
|
}
|
||
|
|
nav > span.cap--top
|
||
|
|
{
|
||
|
|
top:0;
|
||
|
|
}
|
||
|
|
nav > span.cap--bottom
|
||
|
|
{
|
||
|
|
bottom:0;
|
||
|
|
}
|
||
|
|
nav > span.cap::before
|
||
|
|
{
|
||
|
|
content: "⬦";
|
||
|
|
line-height: 37px;
|
||
|
|
font-size: 60px;
|
||
|
|
font-weight:900;
|
||
|
|
text-indent:-10px;
|
||
|
|
display: block;
|
||
|
|
position: relative;
|
||
|
|
top: 0px;
|
||
|
|
width: 0%;
|
||
|
|
height: 31px;
|
||
|
|
background: #000;
|
||
|
|
transition: width 0.4s;
|
||
|
|
}
|
||
|
|
nav > span.edge
|
||
|
|
{
|
||
|
|
border: 30px solid transparent;
|
||
|
|
border-right: 0px;
|
||
|
|
content: " ";
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
box-sizing: border-box;
|
||
|
|
}
|
||
|
|
nav > span.edge::before
|
||
|
|
{
|
||
|
|
content:" ";
|
||
|
|
display:block;
|
||
|
|
position:absolute;
|
||
|
|
top:0;
|
||
|
|
left:-16px;
|
||
|
|
width:5px;
|
||
|
|
height:100%;
|
||
|
|
background:black;
|
||
|
|
}
|
||
|
|
nav > ul
|
||
|
|
{
|
||
|
|
position:relative;
|
||
|
|
padding:10px;
|
||
|
|
margin:32px 0 32px 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<nav>
|
||
|
|
<span class="cap cap--top"></span>
|
||
|
|
<span class="cap cap--bottom"></span>
|
||
|
|
<span class="edge"></span>
|
||
|
|
<ul>
|
||
|
|
<li><a href="#top" >Top</a></li>
|
||
|
|
<li><a href="#order">Order</a></li>
|
||
|
|
<li><a href="#video">Video</a></li>
|
||
|
|
<li><a href="#about">About</a></li>
|
||
|
|
<li><a href="#specs">Specs</a></li>
|
||
|
|
<li><a href="#email">Sign-up</a></li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
<main>
|
||
|
|
<section id="order">
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.shot3d
|
||
|
|
{
|
||
|
|
transform: perspective(1000px) rotateY(25deg);
|
||
|
|
transform-style: preserve-3d;
|
||
|
|
perspective-origin: 50% 50%;
|
||
|
|
|
||
|
|
position: relative;
|
||
|
|
width: 350px;
|
||
|
|
height: 350px;
|
||
|
|
line-height: 350px;
|
||
|
|
|
||
|
|
text-align:center;
|
||
|
|
white-space: nowrap;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shot3d__shadow
|
||
|
|
{
|
||
|
|
display: inline;
|
||
|
|
position: relative;
|
||
|
|
|
||
|
|
outline: 2px solid blue;
|
||
|
|
font-size: 0px;
|
||
|
|
line-height:0;
|
||
|
|
vertical-align: bottom;
|
||
|
|
}
|
||
|
|
.shot3d__shadow::after, .shot3d__shadow::before
|
||
|
|
{
|
||
|
|
transform-origin: center 30px;
|
||
|
|
position: absolute;
|
||
|
|
padding: 0 6px 0 6px;
|
||
|
|
content: " ";
|
||
|
|
top: 100%;
|
||
|
|
left: -6px;
|
||
|
|
width: 100%;
|
||
|
|
height: 6px;
|
||
|
|
border-radius: 6px;
|
||
|
|
box-shadow: 0px 30px 14px black, 0px 43px 22px black, 0px 60px 33px black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.shot3d__shadow::before{ transform: translateY(-30px) rotateX(-90deg) translateY( 5px); }
|
||
|
|
.shot3d__shadow::after { transform: translateY(-30px) rotateX( 90deg) translateY( 5px); }
|
||
|
|
|
||
|
|
.shot3d__shadow img
|
||
|
|
{
|
||
|
|
vertical-align: bottom;
|
||
|
|
display: inline;
|
||
|
|
max-width: 100%;
|
||
|
|
max-height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="shot3d">
|
||
|
|
<div class="shot3d__shadow">
|
||
|
|
<img class="panel panel--front" src="https://placekitten.com/400/800"/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
|
||
|
|
<h3>Truth For Life</h3>
|
||
|
|
<h4>365 Daily Devotionals</h4>
|
||
|
|
<h5>by Alistair Begg</h5>
|
||
|
|
<p>
|
||
|
|
Duis augue neque, dignissim at diam ac, mattis cursus justo. Morbi blandit in ligula eu scelerisque.
|
||
|
|
Maecenas hendrerit eu nunc non molestie. Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.
|
||
|
|
Nullam semper ligula in est tincidunt, vel fringilla nunc vehicula. Nam tempus pellentesque ante, nec iaculis nisi porta id.
|
||
|
|
Ut aliquet purus nec mi egestas ornare.
|
||
|
|
</p>
|
||
|
|
<a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
|
||
|
|
<span>$10.00 (free shipping)</span>
|
||
|
|
</section>
|
||
|
|
<section id="video">
|
||
|
|
<h2 data-spy="0.2|0.8"><span></span><span>Videos</span><span></span></h2>
|
||
|
|
|
||
|
|
</section>
|
||
|
|
<section id="about">
|
||
|
|
<h2 data-spy="0.2|0.8"><span></span><span>About</span><span></span></h2>
|
||
|
|
<p>
|
||
|
|
Duis augue neque, dignissim at diam ac, mattis cursus justo. Morbi blandit in ligula eu scelerisque.
|
||
|
|
Maecenas hendrerit eu nunc non molestie. Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.
|
||
|
|
Nullam semper ligula in est tincidunt, vel fringilla nunc vehicula. Nam tempus pellentesque ante, nec iaculis nisi porta id.
|
||
|
|
Ut aliquet purus nec mi egestas ornare.
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
<strong>Head</strong><p>Nam tempus pellentesque ante, nec iaculis nisi porta id.</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<strong>Hands</strong><p>Vivamus augue enim, egestas a magna vitae, consequat facilisis urna.</p>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<strong>Heart</strong><p>Morbi blandit in ligula eu scelerisque. Maecenas hendrerit eu nunc non molestie.</p>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
<a href="#">Look Inside</a>
|
||
|
|
</section>
|
||
|
|
<section id="specs">
|
||
|
|
<h2 data-spy="0.2|0.8">Specs</h2>
|
||
|
|
</section>
|
||
|
|
<section id="email">
|
||
|
|
<h2 data-spy="0.2|0.8">Sign Up</h2>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
<script>
|
||
|
|
Spy.Init();
|
||
|
|
function JobDuration(inDuration, inHandler, inDone)
|
||
|
|
{
|
||
|
|
var timeCurrent = 0;
|
||
|
|
var timeLimit = inDuration*1000;
|
||
|
|
var timeRelative = 0;
|
||
|
|
var timeMaxed = false;
|
||
|
|
return function(inDelta)
|
||
|
|
{
|
||
|
|
timeCurrent += inDelta;
|
||
|
|
timeMaxed = timeCurrent > timeLimit;
|
||
|
|
if(timeMaxed)
|
||
|
|
{
|
||
|
|
inHandler(1);
|
||
|
|
inDone();
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
return inHandler(timeCurrent / timeLimit);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
document.querySelector("nav").addEventListener("click", function(inEvent)
|
||
|
|
{
|
||
|
|
var domHtml = document.querySelector("html");
|
||
|
|
var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
|
||
|
|
var posStart = domHtml.scrollTop;
|
||
|
|
var posRange = domGoal.getBoundingClientRect().top;
|
||
|
|
var evtTick = function(inProgress){ domHtml.scrollTop = posStart + posRange*Math.sqrt(1 - Math.pow(1-(inProgress), 2)); };
|
||
|
|
var evtDone = function(){ Spy.Resume(); };
|
||
|
|
|
||
|
|
Spy.Suspend();
|
||
|
|
Time.Add( JobDuration(0.4, evtTick, evtDone) );
|
||
|
|
inEvent.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|