diff --git a/static/bauchbinde/assets/script.js b/static/bauchbinde/assets/script.js index 7ee50ef..a5c3d9f 100644 --- a/static/bauchbinde/assets/script.js +++ b/static/bauchbinde/assets/script.js @@ -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() { diff --git a/static/bauchbinde/assets/sprites.png b/static/bauchbinde/assets/sprites.png new file mode 100644 index 0000000..2bc2856 Binary files /dev/null and b/static/bauchbinde/assets/sprites.png differ diff --git a/static/bauchbinde/assets/style.css b/static/bauchbinde/assets/style.css index 8473546..8b73ed1 100644 --- a/static/bauchbinde/assets/style.css +++ b/static/bauchbinde/assets/style.css @@ -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 { diff --git a/static/bauchbinde/index.html b/static/bauchbinde/index.html index 4865c51..af4f24d 100644 --- a/static/bauchbinde/index.html +++ b/static/bauchbinde/index.html @@ -8,8 +8,13 @@
-
-
+
+
+
+
+
+
+