31 lines
No EOL
1.2 KiB
HTML
31 lines
No EOL
1.2 KiB
HTML
<music>
|
|
<vertical-marquee id="bg-text" aria-hidden="true"></vertical-marquee>
|
|
<cute-container>
|
|
<img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
|
|
</cute-container>
|
|
</music>
|
|
<!-- Wall of text go!! -->
|
|
<script>
|
|
(function () {
|
|
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
|
|
const colWidth = 20;
|
|
const rowHeight = 24;
|
|
const container = document.getElementById("bg-text");
|
|
if (!container) return;
|
|
|
|
function build() {
|
|
container.innerHTML = "";
|
|
const cols = Math.ceil(window.innerWidth / colWidth);
|
|
const rows = Math.ceil(window.innerHeight / rowHeight);
|
|
for (let c = 0; c < cols; c++) {
|
|
const col = document.createElement("vertical-marquee-inner"); col.style.left = c *
|
|
colWidth + "px"; for (let r = 0; r < rows; r++) {
|
|
const span = document.createElement("text");
|
|
span.textContent = chars[Math.floor(Math.random() * chars.length)]; col.appendChild(span);
|
|
} container.appendChild(col);
|
|
}
|
|
} let resizeTimer; window.addEventListener("resize", function () {
|
|
clearTimeout(resizeTimer);
|
|
resizeTimer = setTimeout(build, 150);
|
|
}); build();
|
|
})(); </script> |