From c63dfbace44a8ca013c34c149e2ffa8a00b1f75c Mon Sep 17 00:00:00 2001 From: Ferdinand Date: Fri, 3 Apr 2026 16:33:52 +0200 Subject: [PATCH] feat: Hintergrund-Animation 'Background Grey Wave' als Fullscreen-Layer Lottie-Animation fixed hinter allen Inhalten, 100vw/100vh skaliert. Header mit Glassmorphism-Effekt (backdrop-filter blur) damit Inhalt beim Scrollen lesbar bleibt. Co-Authored-By: Claude Sonnet 4.6 --- index.html | 8 ++++++++ style.css | 23 ++++++++++++++++++++++- 2 files changed, 30 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 1c09ca2..19fd234 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ +
@@ -174,6 +175,13 @@ autoplay: true, path: 'Fluid Loading Animation.json' }); + lottie.loadAnimation({ + container: document.getElementById('lottie-bg'), + renderer: 'svg', + loop: true, + autoplay: true, + path: 'Background Grey Wave.json' + }); diff --git a/style.css b/style.css index 30080d7..1e65303 100644 --- a/style.css +++ b/style.css @@ -9,8 +9,24 @@ body { min-height: 100vh; } +#lottie-bg { + position: fixed; + inset: 0; + width: 100vw; + height: 100vh; + z-index: 0; + pointer-events: none; +} + +#lottie-bg svg { + width: 100% !important; + height: 100% !important; +} + header { - background: #fff; + background: rgba(255,255,255,0.85); + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid #ddd; padding: 1rem 1.5rem; position: sticky; @@ -18,6 +34,11 @@ header { z-index: 10; } +main { + position: relative; + z-index: 1; +} + header h1 { font-size: 3rem; margin-bottom: 0; } nav { display: flex; gap: 0.5rem; }