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

525 lines
246 KiB
HTML
Raw Normal View History

setup
2021-08-04 13:12:35 -04:00
<!DOCTYPE html>
<html>
<head>
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;
rough copy
2021-08-04 16:00:10 -04:00
padding:50px;
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;
setup
2021-08-04 13:12:35 -04:00
width:500px;
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 collapse
2021-08-10 11:59:33 -04:00
border: 20px solid #0000;
/* margin: 20px; */
/* padding: 20px; */
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;
top: 0px;
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;
height: 85px;
overflow: hidden;
box-shadow: 0px 3px 10px black;
transition: height 0.4s;
box-sizing: border-box;
flexbox filler experiment
2021-08-09 10:27:43 -04:00
}
nav collapse
2021-08-10 11:59:33 -04:00
nav:hover{
height:100%;
}
nav > span.cap
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;
left:0;
width:100%;
height:33px;
correct title animations
2021-08-10 10:38:48 -04:00
}
nav collapse
2021-08-10 11:59:33 -04:00
nav > span.cap--top
flexbox filler experiment
2021-08-09 10:27:43 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
top:0;
flexbox filler experiment
2021-08-09 10:27:43 -04:00
}
nav collapse
2021-08-10 11:59:33 -04:00
nav > span.cap--bottom
flexbox filler experiment
2021-08-09 10:27:43 -04:00
{
nav collapse
2021-08-10 11:59:33 -04:00
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;
flexbox filler experiment
2021-08-09 10:27:43 -04:00
}
</style>
setup
2021-08-04 13:12:35 -04:00
<nav>
nav collapse
2021-08-10 11:59:33 -04:00
<span class="cap cap--top"></span>
<span class="cap cap--bottom"></span>
<span class="edge"></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
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
<style>
.shot3d
{
soft shadow
2021-08-05 09:46:25 -04:00
transform: perspective(1000px) rotateY(25deg);
transform-style: preserve-3d;
3d shot started
2021-08-04 16:51:40 -04:00
perspective-origin: 50% 50%;
alignments perfect
2021-08-04 17:53:51 -04:00
soft shadow
2021-08-05 09:46:25 -04:00
position: relative;
width: 350px;
height: 350px;
line-height: 350px;
alignments perfect
2021-08-04 17:53:51 -04:00
text-align:center;
white-space: nowrap;
3d shot started
2021-08-04 16:51:40 -04:00
}
soft shadow
2021-08-05 09:46:25 -04:00
.shot3d__shadow
3d shot started
2021-08-04 16:51:40 -04:00
{
alignments perfect
2021-08-04 17:53:51 -04:00
display: inline;
position: relative;
soft shadow
2021-08-05 09:46:25 -04:00
fonts, CTA, h2 anim
2021-08-06 15:59:10 -04:00
outline: 2px solid blue;
alignments perfect
2021-08-04 17:53:51 -04:00
font-size: 0px;
line-height:0;
soft shadow
2021-08-05 09:46:25 -04:00
vertical-align: bottom;
alignments perfect
2021-08-04 17:53:51 -04:00
}
soft shadow
2021-08-05 09:46:25 -04:00
.shot3d__shadow::after, .shot3d__shadow::before
alignments perfect
2021-08-04 17:53:51 -04:00
{
soft shadow
2021-08-05 09:46:25 -04:00
transform-origin: center 30px;
alignments perfect
2021-08-04 17:53:51 -04:00
position: absolute;
soft shadow
2021-08-05 09:46:25 -04:00
padding: 0 6px 0 6px;
alignments perfect
2021-08-04 17:53:51 -04:00
content: " ";
top: 100%;
soft shadow
2021-08-05 09:46:25 -04:00
left: -6px;
alignments perfect
2021-08-04 17:53:51 -04:00
width: 100%;
soft shadow
2021-08-05 09:46:25 -04:00
height: 6px;
border-radius: 6px;
box-shadow: 0px 30px 14px black, 0px 43px 22px black, 0px 60px 33px black;
alignments perfect
2021-08-04 17:53:51 -04:00
}
soft shadow
2021-08-05 09:46:25 -04:00
.shot3d__shadow::before{ transform: translateY(-30px) rotateX(-90deg) translateY( 5px); }
.shot3d__shadow::after { transform: translateY(-30px) rotateX( 90deg) translateY( 5px); }
.shot3d__shadow img
alignments perfect
2021-08-04 17:53:51 -04:00
{
vertical-align: bottom;
display: inline;
max-width: 100%;
max-height: 100%;
3d shot started
2021-08-04 16:51:40 -04:00
}
</style>
<div class="shot3d">
soft shadow
2021-08-05 09:46:25 -04:00
<div class="shot3d__shadow">
<img class="panel panel--front" src="https://placekitten.com/400/800"/>
alignments perfect
2021-08-04 17:53:51 -04:00
</div>
3d shot started
2021-08-04 16:51:40 -04:00
</div>
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>
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