39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
<music>
|
|
<vertical-marquee id="bg-text"></vertical-marquee>
|
|
<cute-container>
|
|
<img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
|
|
</cute-container>
|
|
</music>
|
|
<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>
|