candycanearter07/comicsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cool animation on every page load

Browse Source
This commit is contained in:
etherware-novice 2024-08-31 17:18:57 -05:00
parent 96d8e07817
commit 96acb7ad08
No known key found for this signature in database
GPG Key ID: 5DB73B4D57B9D701
4 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_layouts/default.html
View File

@ -8,6 +8,7 @@ navbar: topnav
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/assets/css/styles.css">
<link rel="stylesheet" href="https://webcomicring.org/js/comicring.css">
<link rel="stylesheet" href="/assets/css/typeboot.css">
</head>
<body>
<img src="/assets/images/crt1.png" class="overlay">
@ -16,6 +17,7 @@ navbar: topnav
{% endif %}
<script data-goatcounter="https://slimepondcount.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
<script src="/assets/js/unixfortune.js"></script>
<script src="/assets/js/typeboot.js"></script>
{% include background.html %}
{% include mplayer.html %}

19
assets/css/typeboot.css Normal file
View File

@ -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;
}

BIN
assets/images/decor/overlay.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 B

28
assets/js/typeboot.js Normal file
View File

@ -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);