<style>
a:link {
color: red;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: red;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: none;
}
a:active {
color: red;
background-color: transparent;
text-decoration: underline;
}
</style>
<div class="terminal glitch">
<div class="scanline"></div>
<p class="spinner">[/]</p>
<div class="hydra">
<div class="hydra_rebooting">
<p>< SYSTEM REBOOTING ></p>
<p class="text--sm">KILLACORP. VER 2.0 SYS RECOVERY</p>
<p class="text--sm">PROCESS: <span class="process-amount">0</span>%</p>
<p class="loading-bar"></p>
</div>
<div class="hydra_reboot_success hidden">
<u><h3>REBOOTING SUCCESSFUL!</h3></u>
<h4><a href="https://killacorp.com"target="blank">
<span class="blinking"<p><u>-+-HOME-+-</u><a/><br>_________</h4>
<p><a href="https://killacorp.com/killa"target="blank">
<span class="blinking"<p><u>KILLACORP</u><a/>⠀+[PROJECTS]+<br>
<p><a href="https://Hit-me.at"target="blank">
<span class="blinking"<p><u>HIT-ME!</u><a/>⠀+[MAGAZINE]+<br>
<p><a href="https://Timekilla.de"target="blank">
<span class="blinking"<p><u>TIMEKILLA</u><a/>⠀+[GAMES]+<br>
<p><a href="https://killacorp.com/community/"target="blank">
<span class="blinking"<p><u>KILL-COMM.</u><a/>⠀+[COMMUNITY]+<br>
<p><a href="https://Cashkilla.com"target="blank">
<span class="blinking"<p><u>CASHKILLA</u><a/>⠀+[$HOP]+<br>
<p><a href="https://instagram.com/killacorp/"target="blank">
<span class="blinking"<p><u>INSTAGRAM</u><a/>⠀+[FEED]+<br> <br> <br>
</div>
</div>
</div>
html {
font-family: Metrophobic, Metrophobic, VT323, VT323, VT323;
font-size: 3vw;
font-weight: 100;
text-shadow: 0 0 3px red;
background-color: #0f0000;
background-image: url(https://killacorp.com/wp-content/uploads/2020/04/wall.jpgbackground=00000000&noise=626262&density=15&opacity=100);
background-size: 100px;
color: #CC0000;
height: 100%;
text-align: center;
}
body {
margin: 0;
height: 100%;
display: grid;
overflow: hidden;
}
.terminal {
grid-row: 1;
grid-column: 1;
grid-gap: 0vw;
padding: 2vw;
grid-template-rows: 1fr auto 1fr;
grid-template-columns: 1fr auto 1fr;
}
.glitch {
animation: glitch 1.5s linear infinite;
}
.glitch--clone {
opacity: 0.2;
}
.glitch--clone .hydra {
filter: blur(2px);
opacity: 0.8;
}
.glitch--clonee .hidden {
filter: blur(2px);
opacity: 0.8;
}
.glitch--top {
animation: glitch--top 1s linear infinite;
}
.glitch--top .hydra {
transform: translate(4vw, 4vw);
}
.glitch--bottom {
animation: glitch--bottom 0.75s linear infinite;
}
.glitch--bottom .hydra {
transform: translate(-1vw, -1vw);
}
.hydra {
box-shadow: 0 0 2px red, inset 0 0 2px red;
padding: 2vw;
border: 0.2vw solid #CC0000;
grid-row: 2/2;
grid-column: 2/2;
}
.scanline {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 0, 0, 0.03);
animation: scanline 6s linear infinite;
}
.loading-bar--unloaded {
color: #fff;
text-shadow: 0 0 5px #fff;
}
.hidden {
display: none;
}
p {
font-family: Metrophobic, Metrophobic, Liberation Mono, Menlo, Courier,
monospace;
font-size: 2.75vw;
line-height: 1.5;
margin: 0;
}
.text--sm {
font-size: 1.75vw;
}
* + .text--sm {
padding-top: 0.5vw;
}
* + .loading-bar {
padding-top: 1vw;
}
@keyframes scanline {
0.01% {
transform: translatey(-100%);
}
99.99% {
transform: translatey(0);
}
100% {
transform: translatey(-100%);
}
}
@keyframes glitch {
2%,
64% {
transform: translate(2px, 0) skew(0deg);
}
4%,
60% {
transform: translate(-2px, 0) skew(0deg);
}
62% {
transform: translate(0, 0) skew(5deg);
}
}
@keyframes glitch--top {
2%,
64% {
transform: translate(2px, -2px);
}
4%,
60% {
transform: translate(-2px, 2px);
}
62% {
transform: translate(13px, -1px) skew(-13deg);
}
}
@keyframes glitch--bottom {
2%,
64% {
transform: translate(-2px, 0);
}
4%,
60% {
transform: translate(-2px, 0);
}
62% {
transform: translate(-22px, 5px) skew(21deg);
}
}
.blinking{
animation:blinkingText 3.2s infinite;
}
@keyframes blinkingText{
0%{opacity: 1;}
40%{opacity: .6;}
50%{opacity: .5;}
80%{opacity: 1;}
90%{opacity: .5;}
100%{opacity:0.7;}
}
View Compiled
const terminal = document.querySelector(".terminal");
const hydra = document.querySelector(".hydra");
const rebootSuccessText = document.querySelector(".hydra_reboot_success");
const maxCharacters = 24;
const unloadedCharacter = ".";
const loadedCharacter = "#";
const spinnerFrames = ["/", "-", "\\", "|"];
// Clone the element and give the glitch classes
(glitchElement => {
const glitch = glitchElement.cloneNode(true);
const glitchReverse = glitchElement.cloneNode(true);
glitch.classList.add("glitch--clone", "glitch--bottom");
glitchReverse.classList.add("glitch--clone", "glitch--top");
glitch.setAttribute("aria-hidden", "true");
glitchReverse.setAttribute("aria-hidden", "true");
glitchElement.insertAdjacentElement("afterend", glitch);
glitchElement.insertAdjacentElement("afterend", glitchReverse);
})(terminal);
// Get all the loading bars
const loadingBars = document.querySelectorAll(".loading-bar");
const processAmounts = document.querySelectorAll(".process-amount");
const spinners = document.querySelectorAll(".spinner");
const rebootingText = document.querySelectorAll(".hydra_rebooting");
const glitches = document.querySelectorAll(".glitch--clone");
// Helper for random number
const RandomNumber = (min, max) => Math.floor(Math.random() * max) + min;
const Delay = (time) => {
return new Promise((resolve) => setTimeout(resolve, time))
};
const HideAll = elements =>
elements.forEach(glitchGroup =>
glitchGroup.forEach(element => element.classList.add("hidden")) );
const ShowAll = elements =>
elements.forEach(glitchGroup =>
glitchGroup.forEach(element => element.classList.remove("hidden")) );
// Render the bar to HTML
const RenderBar = ( values ) => {
const currentLoaded = values.lastIndexOf(loadedCharacter) + 1;
const loaded = values.slice(0, currentLoaded).join("");
const unloaded = values.slice(currentLoaded).join("");
// Update all the loading bars
loadingBars.forEach(loadingBar => {
loadingBar.innerHTML = `(${loaded}<span class="loading-bar--unloaded">${unloaded}</span>)`;
});
// Update all the percentages
loadingPercent = Math.floor(currentLoaded / maxCharacters * 100);
processAmounts.forEach(processAmount => {
processAmount.innerText = loadingPercent;
});
};
// Update the loaded value and render it to HTML
const DrawLoadingBar = ( values ) => {
return new Promise((resolve) => {
const loadingBarAnimation = setInterval(() => {
if (!values.includes(unloadedCharacter)) {
clearInterval(loadingBarAnimation);
resolve();
}
values.pop(unloadedCharacter);
values.unshift(loadedCharacter);
RenderBar(values);
}, RandomNumber(50, 300));
});
};
const DrawSpinner = (spinnerFrame = 0) => {
return setInterval(() => {
spinnerFrame += 1;
spinners.forEach(
spinner =>
(spinner.innerText = `[${
spinnerFrames[spinnerFrame % spinnerFrames.length]
}]`)
);
}, RandomNumber(50, 300));
};
const AnimateBox = () => {
const first = hydra.getBoundingClientRect();
HideAll([spinners, glitches, rebootingText]);
rebootSuccessText.classList.remove("hidden");
rebootSuccessText.style.visibility = "hidden";
const last = hydra.getBoundingClientRect();
const hydraAnimation = hydra.animate([
{ transform: `scale(${first.width / last.width}, ${first.height / last.height})` },
{ transform: `scale(${first.width / last.width}, 1.2)` },
{ transform: `none` }
],{
duration: 1000,
easing: 'cubic-bezier(0,0,0.32,1)',
});
hydraAnimation.addEventListener('finish', () => {
rebootSuccessText.removeAttribute("style");
hydra.removeAttribute("style");
});
};
const PlayHydra = async() => {
terminal.classList.add("glitch");
rebootSuccessText.classList.add("hidden");
ShowAll([spinners, glitches, rebootingText]);
const loadingBar = new Array(maxCharacters).fill(unloadedCharacter);
const spinnerInterval = DrawSpinner();
// Play the loading bar
await DrawLoadingBar(loadingBar);
// Loading is complete on the next frame, hide spinner and glitch
requestAnimationFrame(()=> {
clearInterval(spinnerInterval);
terminal.classList.remove("glitch");
AnimateBox();
setTimeout(PlayHydra, 500000);
});
};
PlayHydra();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.