franconian
/
www.franconian.net
13
0
Fork 0
Code Pull Requests Releases Activity

update bauchbinde

This commit is contained in:
Florian Sorg 2021-12-26 00:23:30 +01:00 committed by Luca
parent 172443a987
commit 7bdab552d6
4 changed files with 63 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
static/bauchbinde/assets/script.js
View File

@ -152,9 +152,19 @@
} }
async function animate() { async function animate() {
document.querySelector('.container').classList.add('visible'); const glitchEl = document.querySelector('.glitch');
const infoEl = document.querySelector('.info');
const glitchDuration = 1500;
glitchEl.classList.add('visible');
await new Promise(r => setTimeout(r, glitchDuration));
glitchEl.classList.remove('visible');
infoEl.classList.add('visible');
await new Promise(r => setTimeout(r, holdDuration * 1000)); await new Promise(r => setTimeout(r, holdDuration * 1000));
document.querySelector('.container').classList.remove('visible'); infoEl.classList.remove('visible');
glitchEl.classList.add('visible');
await new Promise(r => setTimeout(r, glitchDuration));
glitchEl.classList.remove('visible');
} }
async function cycle() { async function cycle() {

BIN
static/bauchbinde/assets/sprites.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

57
static/bauchbinde/assets/style.css
View File

@ -9,6 +9,15 @@
src: url('SpaceMono-Regular.ttf'); src: url('SpaceMono-Regular.ttf');
} }
@keyframes glitch {
0% {
background-position: center 0;
}
0% {
background-position: center 100%;
}
}
:root { :root {
--text-color: #fff; --text-color: #fff;
--header-text-color: #252826; --header-text-color: #252826;
@ -19,14 +28,31 @@
--top: auto; --top: auto;
} }
html {
font-size: calc(var(--width) * 0.034);
}
body { body {
margin: 0; margin: 0;
background-color: #444; background-color: #000;
font-family: SpaceMono, monospace; font-family: SpaceMono, monospace;
font-size: 1.7vw;
color: var(--text-color); color: var(--text-color);
} }
.container {
position: fixed;
bottom: var(--bottom);
left: var(--left);
width: var(--width);
top: var(--top);
}
.info {
border: 0.1vw solid var(--frame-color);
opacity: 0;
background: rgba(0, 0, 0, 0.6);
}
.headline { .headline {
text-transform: lowercase; text-transform: lowercase;
font-family: Changa, sans-serif; font-family: Changa, sans-serif;
@ -35,24 +61,29 @@ body {
color: var(--header-text-color); color: var(--header-text-color);
text-align: center; text-align: center;
line-height: 1.3; line-height: 1.3;
padding: 0 1vw; padding: 0 0.5875rem;
font-size: 1.25em; font-size: 1.25em;
} }
.speaker { .speaker {
padding: 0.5vw 1vw 0.7vw; padding: 0.29rem 0.59rem 0.406rem;
} }
.container { .glitch-container {
transition: opacity 0.3s ease 0s; position: absolute;
position: fixed; top: 50%;
bottom: var(--bottom); left: 50%;
left: var(--left); transform: translate(-50%, -50%);
width: var(--width); width: 101%;
top: var(--top); }
border: 0.1vw solid var(--frame-color);
.glitch {
width: 100%;
padding-top: 14.25722%;
opacity: 0; opacity: 0;
background: rgba(0, 0, 0, 0.5); background-image: url('sprites.png');
background-size: 100% auto;
animation: 1.5s glitch infinite steps(37);
} }
.visible { .visible {

5
static/bauchbinde/index.html
View File

@ -8,8 +8,13 @@
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="info">
<div class="headline"></div> <div class="headline"></div>
<div class="speaker"></div> <div class="speaker"></div>
</div> </div>
<div class="glitch-container">
<div class="glitch"></div>
</div>
</div>
</body> </body>
</html> </html>