feat: add background shimmer effect, use mask for content scroll fade
This commit is contained in:
@@ -11,7 +11,6 @@ const currentPath = pathname.slice(1);
|
|||||||
id="nav"
|
id="nav"
|
||||||
class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
|
class="fixed flex flex-wrap md:flex-nowrap md:justify-start inset-x-0 top-0 w-full z-50"
|
||||||
>
|
>
|
||||||
<div class="bg-linear-to-b from-background from-65% to-transparent to-90% absolute top-0 bottom-0 left-0 w-full h-36 z-0"/>
|
|
||||||
<nav
|
<nav
|
||||||
class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
|
class="nav-base relative md:flex md:items-center md:justify-between rounded-[36px] w-full px-4 mx-2 py-3 mt-4"
|
||||||
aria-label="Global"
|
aria-label="Global"
|
||||||
|
|||||||
@@ -66,21 +66,21 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
|||||||
data-site-id={global.rybbit_site_id}
|
data-site-id={global.rybbit_site_id}
|
||||||
defer
|
defer
|
||||||
/>
|
/>
|
||||||
|
|
||||||
</head>
|
</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">
|
<div class="grow w-full max-w-(--breakpoint-2xl) px-4 sm:px-6 lg:px-8 py-20 mx-auto">
|
||||||
|
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<main class="min-h-screen">
|
<main class="has-js scroll-fade-container min-h-screen">
|
||||||
<slot />
|
<slot />
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
@@ -91,14 +91,84 @@ const normalizeTitle = !title ? global.name : `${title} | ${global.name}`;
|
|||||||
</body>
|
</body>
|
||||||
</html>
|
</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>
|
<style>
|
||||||
.bg-grid-pattern {
|
/* Fade away content below header when scrolling */
|
||||||
background-size: 24px 24px;
|
.has-js .scroll-fade-container {
|
||||||
background-image: radial-gradient(circle, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
|
-webkit-mask-image: linear-gradient(
|
||||||
transition: background-image 0.7s cubic-bezier(0.65, 0, 0.35, 1);
|
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 that creates the "glimmer" effect */
|
||||||
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.25) 1px, transparent 1px);
|
.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>
|
</style>
|
||||||
|
|||||||
@@ -50,8 +50,9 @@
|
|||||||
:root {
|
:root {
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
--theme-transition: 0.3s ease;
|
--theme-transition: 0.3s ease;
|
||||||
color-scheme: light;
|
--scroll-offset: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:root:where(.dark, .dark *) {
|
:root:where(.dark, .dark *) {
|
||||||
@@ -73,9 +74,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
overflow-x: hidden;
|
|
||||||
--swup-fade-theme-duration: 0.2s;
|
--swup-fade-theme-duration: 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user