ferdi2go/Pigmento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Hintergrund-Animation 'Background Grey Wave' als Fullscreen-Layer

Browse Source 
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>
This commit is contained in:
Ferdinand
2026-04-03 16:33:52 +02:00
parent cf31d6bbd2
commit c63dfbace4
2 changed files with 30 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@@ -7,6 +7,7 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>
<div id="lottie-bg"></div>
<header> <header>
<div style="display:flex;align-items:center;gap:0.6rem;margin-bottom:1.25rem"> <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> <div id="lottie-logo" style="width:80px;height:80px;flex-shrink:0"></div>
@@ -174,6 +175,13 @@
autoplay: true, autoplay: true,
path: 'Fluid Loading Animation.json' path: 'Fluid Loading Animation.json'
}); });
lottie.loadAnimation({
container: document.getElementById('lottie-bg'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'Background Grey Wave.json'
});
</script> </script>
</body> </body>
</html> </html>

23
style.css
View File

@@ -9,8 +9,24 @@ body {
min-height: 100vh; 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 { header {
background: #fff; background: rgba(255,255,255,0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
position: sticky; position: sticky;
@@ -18,6 +34,11 @@ header {
z-index: 10; z-index: 10;
} }
main {
position: relative;
z-index: 1;
}
header h1 { font-size: 3rem; margin-bottom: 0; } header h1 { font-size: 3rem; margin-bottom: 0; }
nav { display: flex; gap: 0.5rem; } nav { display: flex; gap: 0.5rem; }