optovia/webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make hero scroll linear - direct 1:1 scroll to height/opacity
All checks were successful
Build Docker Image / build (push) Successful in 3m55s
Details

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-01-26 16:29:20 +07:00
parent 80a587c74f
commit 11a52003e7
2 changed files with 20 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
app/layouts/topnav.vue
View File

@@ -12,10 +12,10 @@
<!-- Content wrapper (centers content in the hero area) -->
<div class="relative z-10 flex flex-col items-center justify-center flex-1 px-4">
<!-- Logo and nav at top when expanded -->
<!-- Logo and nav at top - opacity fades linearly with scroll -->
<div
class="absolute top-0 left-0 right-0 flex items-center justify-between px-4 lg:px-6 transition-opacity duration-200"
:style="{ height: '100px', opacity: heroExpanded ? 1 : 0 }"
class="absolute top-0 left-0 right-0 flex items-center justify-between px-4 lg:px-6"
:style="{ height: '100px', opacity: 1 - collapseProgress }"
>
<!-- Left: Logo + Nav links -->
<div class="flex items-center gap-6 pt-4">
@@ -116,12 +116,12 @@
</div>
</div>
<!-- Centered search area -->
<div class="w-full max-w-2xl" :class="{ 'mt-0': heroExpanded, '-mt-4': !heroExpanded }">
<!-- Big title (only when expanded) -->
<!-- Centered search area - linear transform with scroll -->
<div class="w-full max-w-2xl">
<!-- Big title - fades and moves up linearly -->
<div
class="text-center mb-8 transition-all duration-200"
:style="{ opacity: heroExpanded ? 1 : 0, transform: heroExpanded ? 'translateY(0)' : 'translateY(-20px)' }"
class="text-center mb-8"
:style="{ opacity: 1 - collapseProgress, transform: `translateY(${-collapseProgress * 20}px)` }"
>
<h1 class="text-4xl lg:text-5xl font-bold text-white mb-3">
{{ $t('hero.title', 'Оптовая торговля') }}
@@ -133,7 +133,7 @@
<!-- Search input (always visible, centered) -->
<div
class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/40 bg-white/90 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 transition-all cursor-text"
class="flex items-center gap-3 w-full px-5 py-3 rounded-full border border-white/40 bg-white/90 backdrop-blur-md shadow-lg focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20 cursor-text"
@click="focusHeroInput"
>
<Icon name="lucide:search" size="22" class="text-primary flex-shrink-0" />
@@ -254,9 +254,6 @@ const navigateToCatalog = () => {
router.push(localePath('/catalog'))
}
// Hero expanded state (not fully collapsed)
const heroExpanded = computed(() => collapseProgress.value < 0.5)
// Theme state
const theme = useState<'cupcake' | 'night'>('theme', () => 'cupcake')