SethTrowbridge/devo-book
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
d63f1f83d1
devo-book/index.html

858 lines
257 KiB
HTML
Raw Normal View History

setup
2021-08-04 13:12:35 -04:00
<!DOCTYPE html>
<html>
<head>
nav animation
2021-08-13 13:45:22 -04:00
<meta name="viewport" content="width=device-width, initial-scale=1" >
simpler menu animations
2021-08-16 15:34:08 -04:00
<meta charset="utf-8">
add book viewer and Video
2021-08-16 17:06:07 -04:00
<!-- fonts -->
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
<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>
add book viewer and Video
2021-08-16 17:06:07 -04:00
<!-- layout -->
setup
2021-08-04 13:12:35 -04:00
<style>
body
{
margin:0;
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
font-family: Brandon, Centrury Gothic, sans-serif;
add book viewer and Video
2021-08-16 17:06:07 -04:00
/*background:#008794;*/
/*color:white;*/
setup
2021-08-04 13:12:35 -04:00
}
section
{
position:relative;
add book viewer and Video
2021-08-16 17:06:07 -04:00
min-height: 100vh;
max-width:900px;
margin:0 auto;
setup
2021-08-04 13:12:35 -04:00
box-sizing: border-box;
nav animation
2021-08-13 13:45:22 -04:00
padding:20px;
setup
2021-08-04 13:12:35 -04:00
}
flexbox filler experiment
2021-08-09 10:27:43 -04:00
correct title animations
2021-08-10 10:38:48 -04:00
setup
2021-08-04 13:12:35 -04:00
h2
{
correct title animations
2021-08-10 10:38:48 -04:00
display:flex;
align-items: center;
box-sizing:border-box;
nav animation
2021-08-13 13:45:22 -04:00
width:100%;
max-width:500px;
setup
2021-08-04 13:12:35 -04:00
margin:0 auto;
correct title animations
2021-08-10 10:38:48 -04:00
padding:5px 20px 5px 20px;
setup
2021-08-04 13:12:35 -04:00
text-align:center;
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
text-transform:uppercase;
font-size:36px;
}
correct title animations
2021-08-10 10:38:48 -04:00
h2 > span
{
position: relative;
flex:1;
}
h2 > span:first-child::before, h2 > span:last-child::before
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
{
content: "⬦";
correct title animations
2021-08-10 10:38:48 -04:00
line-height: 7px;
font-size: 60px;
text-indent:-37px;
display: block;
position: absolute;
top: -2px;
width: 0%;
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
height: 5px;
background: #000;
transition: width 0.4s;
}
correct title animations
2021-08-10 10:38:48 -04:00
h2 > span:first-child::before
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
{
correct title animations
2021-08-10 10:38:48 -04:00
text-align:left;
direction:ltr;
right: 0;
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
}
correct title animations
2021-08-10 10:38:48 -04:00
h2 > span:last-child::before
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
{
correct title animations
2021-08-10 10:38:48 -04:00
text-align:right;
direction:rtl;
left: 0;
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
}
correct title animations
2021-08-10 10:38:48 -04:00
h2[data-spy='true'] > span:first-child::before, h2[data-spy='true'] > span:last-child::before
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
{
correct title animations
2021-08-10 10:38:48 -04:00
width: 100%;
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
}
correct title animations
2021-08-10 10:38:48 -04:00
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
.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;
setup
2021-08-04 13:12:35 -04:00
}
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
.CTA:hover::after
setup
2021-08-04 13:12:35 -04:00
{
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
right:-5px;
setup
2021-08-04 13:12:35 -04:00
}
</style>
add book viewer and Video
2021-08-16 17:06:07 -04:00
<!-- nav menu -->
<style>
nav
{
/* margin: 7px; */
/* padding: 10px; */
position: fixed;
display: block;
bottom: 0;
right: 0px;
width: 200px;
z-index: 200;
height: 66px;
overflow: hidden;
transition: height 0.4s;
/* box-sizing: border-box; */
}
nav > .detail
{
display:block;
position:absolute;
width:40px;
right:0;
transition: width 0.4s 0.4s;
}
[nav-open] nav
{
height:100%;
}
nav > .detail.cap
{
height:33px;
}
nav > .detail.cap--top
{
top:10px;
}
nav > .detail.cap--bottom
{
bottom:10px;
}
nav > .detail.cap::before
{
position: relative;
left: -10px;
content: "⬦";
line-height: 37px;
font-size: 60px;
font-weight: 900;
text-indent: -10px;
}
nav > .detail.edge
{
border: 40px solid transparent;
border-right: 0px;
border-left: 0px;
content: " ";
height: 100%;
box-sizing: border-box;
}
nav > .detail.edge::before
{
content: " ";
display: block;
position: absolute;
top: 0;
left: 14px;
width: 5px;
height: 100%;
background: #000;
}
nav .button
{
position: absolute;
bottom: 0;
left:0%;
display: block;
width: 100%;
height: 66px;
transition: left 0.4s 0.4s;
}
nav .button::before, nav .button::after
{
display:block;
position:absolute;
top:20px;
left:0;
width:100%;
box-sizing: border-box;
padding-right:48px;
text-align: right;
text-transform:uppercase;
font-weight:900;
transition:left 0.4s, top 0.4s;
}
nav .button::before
{
content:"Menu";
}
nav .button::after
{
content:"Close";
top:180%;
}
[nav-open] nav .button::before
{
left:180%;
}
[nav-open] nav .button::after
{
top:28px;
}
nav > ul
{
position: absolute;
top: 50vh;
left:0;
width:100%;
box-sizing: border-box;
padding: 0 48px 0 0;
margin: 0;
transform: translateY(-50%);
transition:left 0.4s 0.5s;
list-style-type: none;
text-align: right;
}
nav > ul a
{
display:block;
padding:10px 0 10px 0;
text-decoration: none !important;
text-transform: uppercase;
color:black !important;
}
.Dim
{
box-shadow: 0px 0px 10px rgb(0 0 0 / 20%);
z-index: 100;
position: fixed;
right: 0;
bottom: 0%;
height: 65px;
width: 100%;
background: #fff;
opacity: 0.9;
transition: height 0.4s;
}
[nav-open] .Dim
{
height:100%;
}
</style>
<!-- 3d product shot -->
<style>
.Shot
{
transform: perspective(1000px);
transform-style: preserve-3d;
width:500px;
height: 400px;
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); }
.Book
{
height:100%;
transform-style: preserve-3d;
transform: translateZ(-100px);
position: relative;
display:inline-block;
}
.Spine
{
display:flex;
justify-content:space-between;
margin:0 auto;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.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
{
float:left;
position:absolute;
top:0;
left:0;
height:100%;
backface-visibility: hidden;
transform-style: preserve-3d;
transform: rotateY(180deg);
}
.Page .Back
{
transform: rotateY(0deg);
}
.Page img
{
height:100%;
width:auto;
}
.Page--Fill
{
display: block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.Page--Shrink
{
height:98%;
top:1%;
}
.Shadow--Drop::before
{
transform: rotateX(90deg) translateY(-100px) translateZ(-3px);
box-shadow: 0px 100px 60px black, 0px 100px 17px black;
display: block;
position: absolute;
top: 100%;
content: " ";
width: 100%;
height: 8px;
border-radius: 39px;
}
.Shadow--Sheet::after
{
content:" ";
background-size: 100% 100%;
background-position: 0px 0px;
background-image: conic-gradient(from 0deg at 0% 0%, #00000000 33%, #000000FF 75%);
display:block;
position:absolute;
z-index:100;
top:0;
left:0;
width:100%;
height:100%;
backface-visibility: hidden;
transform:scaleX(-1);
}
.Shadow--Sheet--Flip::after
{
transform:scaleX(1);
}
.Shadow--Radiosity::after
{
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;
z-index:100;
width: 100%;
height: 100%;
}
</style>
<!-- time -->
rough copy
2021-08-04 16:00:10 -04:00
<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;
}
}
};
nav collapse
2021-08-10 11:59:33 -04:00
</script>
add book viewer and Video
2021-08-16 17:06:07 -04:00
<!-- scroll spy -->
nav collapse
2021-08-10 11:59:33 -04:00
<script>
var Spy =
{
Attribute:"data-spy",
Members:[],
Defaults:[0, 1, 0, 1],
Disabled:false,
Suspend:function()
rough copy
2021-08-04 16:00:10 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
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++)
rough copy
2021-08-04 16:00:10 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
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)
rough copy
2021-08-04 16:00:10 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
member.Element.setAttribute(Spy.Attribute, visible);
member.Visible = visible;
member.Change(visible);
rough copy
2021-08-04 16:00:10 -04:00
}
nav collapse
2021-08-10 11:59:33 -04:00
}
},
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++)
rough copy
2021-08-04 16:00:10 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
if(bounds[j])
rough copy
2021-08-04 16:00:10 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
bounds[j] = parseFloat(bounds[j]);
rough copy
2021-08-04 16:00:10 -04:00
}
nav collapse
2021-08-10 11:59:33 -04:00
else
rough copy
2021-08-04 16:00:10 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
bounds[j] = Spy.Defaults[j];
rough copy
2021-08-04 16:00:10 -04:00
}
nav collapse
2021-08-10 11:59:33 -04:00
}
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++)
rough copy
2021-08-04 16:00:10 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
Spy.Create(elements[i]);
rough copy
2021-08-04 16:00:10 -04:00
}
nav collapse
2021-08-10 11:59:33 -04:00
},
Init:function()
{
Spy.CreateAll();
Spy.UpdateAll();
document.addEventListener("scroll", Spy.UpdateAll, {passive:true});
window.addEventListener("resize", Spy.UpdateAll, {passive:true});
}
};
</script>
flexbox filler experiment
2021-08-09 10:27:43 -04:00
add book viewer and Video
2021-08-16 17:06:07 -04:00
<!-- video player -->
<script>
var Video;
Video = {};
Video.Players = [];
Video.Initialized = false;
Video.SilenceOthers = function(inIndex)
{
var i;
for(i=0; i<Video.Players.length; i++)
{
if(i != inIndex)
{
Video.Players[i].Stop();
}
}
};
Video.Player = function(inDOMID, inVideoID)
{
var obj;
obj = {};
obj.DOMID = inDOMID;
obj.QueuedState = false;
obj.Stop = function(){obj.QueuedState = false;};
obj.Play = function(){obj.QueuedState = true;};
obj.Build = function()
{
obj.YT = new YT.Player(obj.DOMID, obj.Config);
};
obj.Ready = function(inEvent)
{
obj.Stop = function()
{
obj.YT.pauseVideo();
};
obj.Play = function()
{
obj.YT.playVideo();
};
if(obj.QueuedState)
{
obj.Play();
}
};
obj.StateChange = function(inEvent)
{
if(inEvent.data === 1)
{
Video.SilenceOthers(obj.Index);
}
};
obj.Config = {
videoId:inVideoID,
playerVars: { modestbranding:true, rel:0 },
events:{'onReady': obj.Ready, 'onStateChange': obj.StateChange }
};
obj.Index = Video.Players.length;
Video.Players.push(obj);
nav animation
2021-08-13 13:45:22 -04:00
add book viewer and Video
2021-08-16 17:06:07 -04:00
if(Video.Initialized)
{
// if this player is being created long after the YT library initialized, go ahead and build it now
obj.Build();
}
return obj;
};
Video.BuildPlayers = function()
open/clonse transition no clip
2021-08-13 17:17:33 -04:00
{
add book viewer and Video
2021-08-16 17:06:07 -04:00
var i;
for(i=0; i<Video.Players.length; i++)
{
Video.Players[i].Build();
}
Video.Initialized = true;
};
Video.Init = function()
nav collapse
2021-08-10 11:59:33 -04:00
{
add book viewer and Video
2021-08-16 17:06:07 -04:00
var tagNew, tagOld;
simpler menu animations
2021-08-16 15:34:08 -04:00
add book viewer and Video
2021-08-16 17:06:07 -04:00
tagNew = document.createElement('script');
tagNew.src = "https://www.youtube.com/iframe_api";
tagOld = document.getElementsByTagName('script')[0];
tagOld.parentNode.insertBefore(tagNew, tagOld);
simpler menu animations
2021-08-16 15:34:08 -04:00
add book viewer and Video
2021-08-16 17:06:07 -04:00
window.onYouTubeIframeAPIReady = Video.BuildPlayers;
};
</script>
dimmer
2021-08-16 12:01:43 -04:00
add book viewer and Video
2021-08-16 17:06:07 -04:00
</head>
<body>
setup
2021-08-04 13:12:35 -04:00
<nav>
nav animation
2021-08-13 13:45:22 -04:00
<span class="detail edge"></span>
<span class="detail cap cap--top"></span>
<span class="detail cap cap--bottom"></span>
flexbox filler experiment
2021-08-09 10:27:43 -04:00
<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 animation
2021-08-13 13:45:22 -04:00
<span class="button"></span>
setup
2021-08-04 13:12:35 -04:00
</nav>
dimmer
2021-08-16 12:01:43 -04:00
<div class="Dim"></div>
correct title animations
2021-08-10 10:38:48 -04:00
<main>
rough copy
2021-08-04 16:00:10 -04:00
<section id="order">
3d shot started
2021-08-04 16:51:40 -04:00
correct title animations
2021-08-10 10:38:48 -04:00
<h2 data-spy="0.2|0.8"><span></span><span>Order</span><span></span></h2>
rough copy
2021-08-04 16:00:10 -04:00
<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>
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
<a class="CTA" href="https://truthforlife.org/store/buy/">Buy Now</a>
rough copy
2021-08-04 16:00:10 -04:00
<span>$10.00 (free shipping)</span>
add book viewer and Video
2021-08-16 17:06:07 -04:00
<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>
<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>
<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>
rough copy
2021-08-04 16:00:10 -04:00
</section>
setup
2021-08-04 13:12:35 -04:00
<section id="video">
correct title animations
2021-08-10 10:38:48 -04:00
<h2 data-spy="0.2|0.8"><span></span><span>Videos</span><span></span></h2>
rough copy
2021-08-04 16:00:10 -04:00
setup
2021-08-04 13:12:35 -04:00
</section>
<section id="about">
correct title animations
2021-08-10 10:38:48 -04:00
<h2 data-spy="0.2|0.8"><span></span><span>About</span><span></span></h2>
rough copy
2021-08-04 16:00:10 -04:00
<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>
setup
2021-08-04 13:12:35 -04:00
</section>
<section id="specs">
<h2 data-spy="0.2|0.8">Specs</h2>
</section>
rough copy
2021-08-04 16:00:10 -04:00
<section id="email">
<h2 data-spy="0.2|0.8">Sign Up</h2>
</section>
correct title animations
2021-08-10 10:38:48 -04:00
</main>
nav animation
2021-08-13 13:45:22 -04:00
add book viewer and Video
2021-08-16 17:06:07 -04:00
<!-- init zone -->
<script>
nav animation
2021-08-13 13:45:22 -04:00
function $(inSelector){ return document.querySelectorAll(inSelector); }
$("nav .button")[0].addEventListener("click", function()
{
if(document.body.hasAttribute("nav-open"))
{
document.body.removeAttribute("nav-open");
}
else
{
document.body.setAttribute("nav-open", true);
}
})
add book viewer and Video
2021-08-16 17:06:07 -04:00
rough copy
2021-08-04 16:00:10 -04:00
Spy.Init();
job w/ duration
2021-08-04 14:38:48 -04:00
function JobDuration(inDuration, inHandler, inDone)
setup
2021-08-04 13:12:35 -04:00
{
var timeCurrent = 0;
var timeLimit = inDuration*1000;
var timeRelative = 0;
var timeMaxed = false;
return function(inDelta)
{
timeCurrent += inDelta;
timeMaxed = timeCurrent > timeLimit;
job w/ duration
2021-08-04 14:38:48 -04:00
if(timeMaxed)
{
inHandler(1);
inDone();
return false;
}
return inHandler(timeCurrent / timeLimit);
setup
2021-08-04 13:12:35 -04:00
};
}
add book viewer and Video
2021-08-16 17:06:07 -04:00
setup
2021-08-04 13:12:35 -04:00
document.querySelector("nav").addEventListener("click", function(inEvent)
{
job w/ duration
2021-08-04 14:38:48 -04:00
var domHtml = document.querySelector("html");
var domGoal = document.querySelector(inEvent.target.getAttribute("href"));
rough copy
2021-08-04 16:00:10 -04:00
var posStart = domHtml.scrollTop;
job w/ duration
2021-08-04 14:38:48 -04:00
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) );
setup
2021-08-04 13:12:35 -04:00
inEvent.preventDefault();
});
add book viewer and Video
2021-08-16 17:06:07 -04:00
let pages = $("[swing]");
let table = $(".Shot")[0];
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();
};
Video.Init();
// create and initialize youtube videos...
var playerPromo, playerInterview;
playerPromo = Video.Player('PlayerPromo', 'c_qQHI0rQ6c');
playerInterview = Video.Player('PlayerInterview', 'wEkSWh2_yM4');
setup
2021-08-04 13:12:35 -04:00
</script>
</body>
</html>
Reference in New Issue Copy Permalink