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>