75ce64b46e
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
33 lines
874 B
Vue
33 lines
874 B
Vue
<template>
|
|
<div class="absolute inset-0 overflow-hidden">
|
|
<!-- Lottie animation -->
|
|
<ClientOnly>
|
|
<DotLottieVue
|
|
src="/animations/supply-chain.lottie"
|
|
autoplay
|
|
loop
|
|
class="absolute inset-0 w-full h-full object-cover"
|
|
:style="{
|
|
opacity: 1 - collapseProgress * 0.7,
|
|
transform: `scale(${1 + collapseProgress * 0.1})`
|
|
}"
|
|
/>
|
|
</ClientOnly>
|
|
|
|
<!-- Overlay for text readability - only when hero starts collapsing -->
|
|
<div
|
|
v-if="collapseProgress > 0.5"
|
|
class="absolute inset-0 bg-gradient-to-b from-slate-900/60 via-slate-900/40 to-slate-900/70"
|
|
:style="{ opacity: (collapseProgress - 0.5) * 2 }"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
|
|
|
|
defineProps<{
|
|
collapseProgress: number
|
|
}>()
|
|
</script>
|