Fix hero animation: object-fit cover + conditional blur + glass on collapse
All checks were successful
Build Docker Image / build (push) Successful in 5m14s

- HeroBackground.vue:
  - Add object-cover class to Lottie animation (fills container)
  - Make dark overlay conditional (v-if collapseProgress > 0.5)
  - Overlay fades in during collapse (opacity 0→1)

- MainNavigation.vue:
  - Replace glassStyle prop with isCollapsed
  - Glass effect (backdrop-blur-md) applies only when collapsed

- topnav.vue:
  - Pass isCollapsed instead of glass-style
  - Home page: isCollapsed from useHeroScroll
  - Other pages: always true (always collapsed)

Result:
- Animation covers full viewport without crop
- No blur overlay when hero is expanded
- Glass effect appears only when header collapses to 100px
This commit is contained in:
Ruslan Bakiev
2026-01-27 09:14:20 +07:00
parent 70c53da8eb
commit 75ce64b46e
3 changed files with 22 additions and 18 deletions

View File

@@ -28,7 +28,7 @@
:can-search="canSearch"
:show-mode-toggle="true"
:show-active-mode="isCatalogSection"
:glass-style="isHomePage || isCatalogSection"
:is-collapsed="isHomePage ? heroIsCollapsed : true"
@toggle-theme="toggleTheme"
@set-catalog-mode="setCatalogMode"
@sign-out="onClickSignOut"