granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add scroll-triggered gradient to nav background

Browse source
This commit is contained in:
Justin Edmund 2025-12-02 01:45:16 -08:00
parent c8c076e707
commit 4fdc859941
1 changed files with 30 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/routes/(app)/+layout.svelte
View file

@ -16,6 +16,16 @@
// Reference to the scrolling container // Reference to the scrolling container
let mainContent: HTMLElement | undefined let mainContent: HTMLElement | undefined
// Track scroll state for gradient visibility
let isScrolled = $state(false)
// Handle scroll events to toggle gradient visibility
function handleScroll() {
if (mainContent) {
isScrolled = mainContent.scrollTop > 0
}
}
// Store scroll positions for each visited route // Store scroll positions for each visited route
const scrollPositions = new Map<string, number>() const scrollPositions = new Map<string, number>()
@ -87,7 +97,7 @@
<Tooltip.Provider> <Tooltip.Provider>
<div class="app-container" class:sidebar-open={sidebar.isOpen}> <div class="app-container" class:sidebar-open={sidebar.isOpen}>
<div class="main-pane"> <div class="main-pane">
<div class="nav-blur-background"></div> <div class="nav-blur-background" class:scrolled={isScrolled}></div>
<div class="main-navigation"> <div class="main-navigation">
<Navigation <Navigation
isAuthenticated={data?.isAuthenticated} isAuthenticated={data?.isAuthenticated}
@ -95,7 +105,7 @@
currentUser={data?.currentUser} currentUser={data?.currentUser}
/> />
</div> </div>
<main class="main-content" bind:this={mainContent}> <main class="main-content" bind:this={mainContent} onscroll={handleScroll}>
{@render children?.()} {@render children?.()}
</main> </main>
</div> </div>
@ -153,7 +163,7 @@
left: 0; left: 0;
right: 0; right: 0;
height: 81px; // Matches $nav-height height: 81px; // Matches $nav-height
z-index: 1; // Lower z-index so scrollbar appears above z-index: 3; // Above content (2) for backdrop-filter to work, below nav (10)
pointer-events: none; pointer-events: none;
transition: right $duration-slide ease-in-out; transition: right $duration-slide ease-in-out;
@ -173,6 +183,23 @@
// Mask gradient to fade out the blur effect progressively // Mask gradient to fade out the blur effect progressively
mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
// Scroll-triggered gradient overlay using pseudo-element
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 100%);
opacity: 0;
transition: opacity 0.2s ease-in-out;
}
&.scrolled::after {
opacity: 1;
}
} }
// Navigation wrapper - fixed but shifts with main-pane // Navigation wrapper - fixed but shifts with main-pane