alexlebens/site-profile
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Activity

feat: add background shimmer effect, use mask for content scroll fade

Browse Source
This commit is contained in:
Alex Lebens
2026-02-19 23:34:56 -06:00
parent b3c377f62d
commit 5e37e2bb53
3 changed files with 88 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/layouts/BaseLayout.astro
View File

@@ -66,21 +66,21 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
data-site-id={global.rybbit_site_id}
defer
/>
</head>
<body class="bg-background selection:bg-yellow-400">
<!-- Disabled texture background for now
<div class="fixed inset-0 -z-10">
<div class="bg-grid-pattern absolute inset-0 mask-[radial-gradient(white,transparent_85%)] bg-position-[center_top_-1px]"/>
</div>
-->
<body class="bg-background selection:bg-yellow-400 m-0 p-0 overflow-x-hidden">
<!-- Sliding backgrounds -->
<div class="bg"/>
<div class="bg bg2"/>
<div class="bg bg3"/>
<!-- Layout -->
<div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
<Header />
<main class="min-h-screen">
<main class="has-js scroll-fade-container min-h-screen">
<slot />
</main>
@@ -91,14 +91,84 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
</body>
</html>
<script>
document.addEventListener('astro:page-load', () => {
const onScroll = () => {
document.documentElement.style.setProperty('--scroll-offset', `${window.scrollY}px`);
document.documentElement.classList.add('has-js');
};
window.removeEventListener('scroll', onScroll);
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();
});
</script>
<style>
.bg-grid-pattern {
background-size: 24px 24px;
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
/* Fade away content below header when scrolling */
.has-js .scroll-fade-container {
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0px,
transparent 16px,
black 80px,
black 100%
);
mask-image: linear-gradient(
to bottom,
transparent 0px,
transparent 16px,
black 80px,
black 100%
);
-webkit-mask-size: 100vw 100vh;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position-y: var(--scroll-offset);
mask-position-y: var(--scroll-offset);
}
:global(.dark) .bg-grid-pattern {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
/* Background that creates the "glimmer" effect */
.bg {
animation: slide 20s ease-in-out infinite alternate;
background-image: linear-gradient(-60deg, var(--bg-primary) 33.3%, var(--bg-secondary) 33.3%, var(--bg-secondary) 66.6%, var(--bg-tertiary) 66.6%);
filter: blur(80px);
top: 0;
bottom: 0;
left: -50%;
right: -50%;
opacity: .5;
position: fixed;
z-index: -1;
--bg-primary: #e5e5e5;
--bg-secondary: #d9d9d9;
--bg-tertiary: #ededed;
}
:global(.dark) .bg {
--bg-primary: #292524;
--bg-secondary: #44403c;
--bg-tertiary: #57534e;
}
.bg2 {
animation-direction: alternate-reverse;
animation-duration: 30s;
}
.bg3 {
animation-duration: 25s;
}
@keyframes slide {
0% {
transform:translateX(-25%);
}
100% {
transform:translateX(25%);
}
}
</style>