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 <noreply@anthropic.com>
2026-04-03 16:33:52 +02:00
parent cf31d6bbd2
commit c63dfbace4
2 changed files with 30 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
+  <div id="lottie-bg"></div>
  <header>
    <div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:1.25rem">
      <div id="lottie-logo" style="width:80px;height:80px;flex-shrink:0"></div>
@@ -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'
+    });
  </script>
 </body>
 </html>
--- 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; }