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

528 lines
246 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" >
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
<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>
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;
setup
2021-08-04 13:12:35 -04:00
}
section
{
position:relative;
height: 100vh;
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>
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>
<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>
setup
2021-08-04 13:12:35 -04:00
</head>
<body>
flexbox filler experiment
2021-08-09 10:27:43 -04:00
<style>
nav
{
nav animation
2021-08-13 13:45:22 -04:00
/* margin: 7px; */
/* padding: 10px; */
flexbox filler experiment
2021-08-09 10:27:43 -04:00
position: fixed;
nav collapse
2021-08-10 11:59:33 -04:00
display: block;
nav animation
2021-08-13 13:45:22 -04:00
bottom: 0;
flexbox filler experiment
2021-08-09 10:27:43 -04:00
right: 0px;
width: 200px;
nav collapse
2021-08-10 11:59:33 -04:00
z-index: 10;
nav animation
2021-08-13 13:45:22 -04:00
height: 66px;
nav collapse
2021-08-10 11:59:33 -04:00
overflow: hidden;
transition: height 0.4s;
nav animation
2021-08-13 13:45:22 -04:00
/* box-sizing: border-box; */
nav collapse
2021-08-10 11:59:33 -04:00
}
nav animation
2021-08-13 13:45:22 -04:00
nav > .detail
correct title animations
2021-08-10 10:38:48 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
display:block;
position:absolute;
nav animation
2021-08-13 13:45:22 -04:00
width:33px;
right:0;
transition: width 0.4s 0.4s;
}
[nav-open] nav
{
height:100%;
}
[nav-open] nav > .detail
{
nav collapse
2021-08-10 11:59:33 -04:00
width:100%;
nav animation
2021-08-13 13:45:22 -04:00
}
nav > .detail.cap
{
nav collapse
2021-08-10 11:59:33 -04:00
height:33px;
correct title animations
2021-08-10 10:38:48 -04:00
}
nav animation
2021-08-13 13:45:22 -04:00
nav > .detail.cap--top
flexbox filler experiment
2021-08-09 10:27:43 -04:00
{
nav animation
2021-08-13 13:45:22 -04:00
top:10px;
flexbox filler experiment
2021-08-09 10:27:43 -04:00
}
nav animation
2021-08-13 13:45:22 -04:00
nav > .detail.cap--bottom
flexbox filler experiment
2021-08-09 10:27:43 -04:00
{
nav animation
2021-08-13 13:45:22 -04:00
bottom:10px;
nav collapse
2021-08-10 11:59:33 -04:00
}
nav animation
2021-08-13 13:45:22 -04:00
nav > .detail.cap::before
nav collapse
2021-08-10 11:59:33 -04:00
{
nav animation
2021-08-13 13:45:22 -04:00
position: relative;
left: -10px;
nav collapse
2021-08-10 11:59:33 -04:00
content: "⬦";
line-height: 37px;
font-size: 60px;
nav animation
2021-08-13 13:45:22 -04:00
font-weight: 900;
text-indent: -10px;
nav collapse
2021-08-10 11:59:33 -04:00
}
nav animation
2021-08-13 13:45:22 -04:00
nav > .detail.edge
nav collapse
2021-08-10 11:59:33 -04:00
{
nav animation
2021-08-13 13:45:22 -04:00
border: 40px solid transparent;
nav collapse
2021-08-10 11:59:33 -04:00
border-right: 0px;
nav animation
2021-08-13 13:45:22 -04:00
border-left: 0px;
content: " ";
height: 100%;
box-sizing: border-box;
}
nav > .detail.edge::before
{
nav collapse
2021-08-10 11:59:33 -04:00
content: " ";
display: block;
position: absolute;
nav animation
2021-08-13 13:45:22 -04:00
top: 0;
left: 14px;
width: 5px;
nav collapse
2021-08-10 11:59:33 -04:00
height: 100%;
nav animation
2021-08-13 13:45:22 -04:00
background: #000;
nav collapse
2021-08-10 11:59:33 -04:00
}
nav animation
2021-08-13 13:45:22 -04:00
nav .button
nav collapse
2021-08-10 11:59:33 -04:00
{
nav animation
2021-08-13 13:45:22 -04:00
position: absolute;
bottom: 0;
left:0%;
display: block;
width: 100%;
height: 66px;
transition: left 0.4s 0.4s;
}
nav .button::before, nav .button::after
{
nav collapse
2021-08-10 11:59:33 -04:00
display:block;
position:absolute;
nav animation
2021-08-13 13:45:22 -04:00
top:20px;
left:0;
width:100%;
text-align: center;
text-transform:uppercase;
font-weight:900;
}
nav .button::before
{
content:"Menu";
}
nav .button::after
{
content:"Close";
left:-100%;
}
[nav-open] nav .button
{
left:100%;
nav collapse
2021-08-10 11:59:33 -04:00
}
nav > ul
{
nav animation
2021-08-13 13:45:22 -04:00
position: absolute;
padding: 31px;
margin: 0;
top: 50vh;
left:100%;
width:100%;
transform: translateY(-50%);
transition:left 0.4s 0.5s;
}
[nav-open] nav > ul
{
left:0%;
flexbox filler experiment
2021-08-09 10:27:43 -04:00
}
</style>
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 collapse
2021-08-10 11:59:33 -04:00
nav animation
2021-08-13 13:45:22 -04:00
<span class="button"></span>
setup
2021-08-04 13:12:35 -04:00
</nav>
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>
</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>
setup
2021-08-04 13:12:35 -04:00
<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);
}
})
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
};
}
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();
});
</script>
</body>
</html>
Reference in New Issue Copy Permalink