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

update bauchbinde
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Florian Sorg 2021-12-26 00:23:30 +01:00
parent 75e2e10fad
commit 4af7b84afb
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() {
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));
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() {

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');
}
@keyframes glitch {
0% {
background-position: center 0;
}
0% {
background-position: center 100%;
}
}
:root {
--text-color: #fff;
--header-text-color: #252826;
@ -19,14 +28,31 @@
--top: auto;
}
html {
font-size: calc(var(--width) * 0.034);
}
body {
margin: 0;
background-color: #444;
background-color: #000;
font-family: SpaceMono, monospace;
font-size: 1.7vw;
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 {
text-transform: lowercase;
font-family: Changa, sans-serif;
@ -35,24 +61,29 @@ body {
color: var(--header-text-color);
text-align: center;
line-height: 1.3;
padding: 0 1vw;
padding: 0 0.5875rem;
font-size: 1.25em;
}
.speaker {
padding: 0.5vw 1vw 0.7vw;
padding: 0.29rem 0.59rem 0.406rem;
}
.container {
transition: opacity 0.3s ease 0s;
position: fixed;
bottom: var(--bottom);
left: var(--left);
width: var(--width);
top: var(--top);
border: 0.1vw solid var(--frame-color);
.glitch-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 101%;
}
.glitch {
width: 100%;
padding-top: 14.25722%;
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 {

9
static/bauchbinde/index.html
View File

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