diff --git a/_layouts/default.html b/_layouts/default.html index da24751..e70b999 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -8,6 +8,7 @@ navbar: topnav {{ page.title }} + @@ -16,6 +17,7 @@ navbar: topnav {% endif %} + {% include background.html %} {% include mplayer.html %} diff --git a/assets/css/typeboot.css b/assets/css/typeboot.css new file mode 100644 index 0000000..977caf1 --- /dev/null +++ b/assets/css/typeboot.css @@ -0,0 +1,19 @@ +#typeboot { + position: fixed; top: 0; left: 0; + width: 200%; height: 100%; + z-index: 100; +} + +#typeboot>*::before { + content: " "; + background-color: white; + height: 100%; + display: inline-block; + position: relative; left: -2rem; + width: 2rem; +} + +#typeboot>* { + height: 30px; + background-color: black; +} diff --git a/assets/images/decor/overlay.png b/assets/images/decor/overlay.png new file mode 100644 index 0000000..dfe4e2a Binary files /dev/null and b/assets/images/decor/overlay.png differ diff --git a/assets/js/typeboot.js b/assets/js/typeboot.js new file mode 100644 index 0000000..443f461 --- /dev/null +++ b/assets/js/typeboot.js @@ -0,0 +1,28 @@ +const lineSize = 30; +const lineCount = Math.ceil(window.innerHeight / lineSize); +const topScr = document.createElement("div"); + +const slideAnim = [ + { translate: "0 0" }, + { translate: "200vw 0" }, +]; + +const slideTiming = { + duration: (2000 / lineCount), + iterations: 1, + fill: "both", +}; + + +for (let i = 0; i < lineCount; i++) { + let currentLine = document.createElement("div"); + topScr.appendChild(currentLine); + + setTimeout( + () => { currentLine.animate(slideAnim, slideTiming); }, + i * slideTiming.duration + ); +} + +topScr.id = "typeboot"; +document.body.appendChild(topScr);