Make hero scroll linear - direct 1:1 scroll to height/opacity

app/composables/useHeroScroll.ts

@@ -1,41 +1,35 @@
 /**
  * Composable for home page hero scroll behavior
- * Starts with full-screen hero, collapses to fixed header on scroll
+ * Linear: hero shrinks 1:1 with scroll, from full screen to fixed header
  */
 export const useHeroScroll = () => {
   const scrollY = ref(0)
 
-  // Hero height = viewport height minus some space (e.g., 80px for visual balance)
+  // Hero height = viewport height minus some space
   const heroBaseHeight = ref(0)
   const collapsedHeight = 100 // Fixed header height when collapsed
 
   // Calculate hero height based on viewport
   const updateHeroHeight = () => {
     if (import.meta.client) {
-      heroBaseHeight.value = window.innerHeight - 80 // Nearly full screen
+      heroBaseHeight.value = window.innerHeight - 80
     }
   }
 
-  // How much to collapse (0 = full hero, 1 = fully collapsed)
+  // Linear: height = base - scroll, clamped to min
+  const heroHeight = computed(() => {
+    return Math.max(collapsedHeight, heroBaseHeight.value - scrollY.value)
+  })
+
+  // Linear progress 0..1
   const collapseProgress = computed(() => {
     const maxScroll = heroBaseHeight.value - collapsedHeight
     if (maxScroll <= 0) return 1
     return Math.min(1, Math.max(0, scrollY.value / maxScroll))
   })
 
-  // Current hero height (animated)
-  const heroHeight = computed(() => {
-    const maxScroll = heroBaseHeight.value - collapsedHeight
-    return Math.max(collapsedHeight, heroBaseHeight.value - scrollY.value)
-  })
-
-  // Is fully collapsed to fixed header?
-  const isCollapsed = computed(() => collapseProgress.value >= 1)
-
-  // Padding for content below hero
-  const contentPaddingTop = computed(() => {
-    return heroHeight.value
-  })
+  // Is fully collapsed?
+  const isCollapsed = computed(() => heroHeight.value <= collapsedHeight)
 
   const onScroll = () => {
     if (import.meta.client) {
@@ -69,7 +63,6 @@ export const useHeroScroll = () => {
     heroHeight,
     collapseProgress,
     isCollapsed,
-    contentPaddingTop,
     collapsedHeight
   }
 }

app/layouts/topnav.vue

@@ -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')