78 lines
2.4 KiB
Vue
78 lines
2.4 KiB
Vue
<script setup>
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { onMounted, ref, defineProps } from 'vue';
|
|
import { gsap } from 'gsap';
|
|
import { initFlowbite } from 'flowbite';
|
|
|
|
const { block, blockData, frontpage } = defineProps({
|
|
block: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
blockData: {
|
|
type: Object,
|
|
default: () => ({})
|
|
},
|
|
frontpage: {
|
|
type: Boolean
|
|
}
|
|
});
|
|
|
|
onMounted(() => {
|
|
initFlowbite();
|
|
animateLogo();
|
|
});
|
|
|
|
const clubName = ref(null);
|
|
|
|
/**
|
|
* Club logo animation in the header
|
|
*/
|
|
|
|
|
|
function animateLogo() {
|
|
const text = clubName.value.textContent.trim();
|
|
const chars = Array.from(text);
|
|
|
|
// Clear the text content and create a span for each character
|
|
clubName.value.textContent = '';
|
|
chars.forEach((char) => {
|
|
const span = document.createElement('span');
|
|
span.textContent = char;
|
|
clubName.value.appendChild(span);
|
|
});
|
|
|
|
const logoTimeline = gsap.timeline({ defaults: { ease: 'power1.out' } });
|
|
|
|
// Animate each letter
|
|
logoTimeline.from(clubName.value.children, {
|
|
duration: 0.5,
|
|
opacity: 0,
|
|
y: 20,
|
|
stagger: 0.05,
|
|
});
|
|
|
|
// Start fading in the logo before the text animation completes
|
|
logoTimeline.to("#clubLogo", {
|
|
duration: 1,
|
|
opacity: 1,
|
|
}, "-=0.5");
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header :id="block.anchorName" class="h-[400px] bg-heroBg bg-no-repeat bg-center bg-cover">
|
|
<div class="h-[400px] bg-heroSoldiers bg-no-repeat bg-bottom z-0">
|
|
<div class="h-[400px] bg-heroFgR bg-repeat-x bg-bottom z-10">
|
|
<div class="flex items-end justify-center content-end pt-12">
|
|
<Link id="logoHeader" :href="route('forsiden')" class="flex justify-center items-center p-2">
|
|
<img id="clubLogo" src="/img/oms-glow.png" class="w-14 md:w-20 lg:w-28 mr-2 md:mr-6 shadow-2xl" alt="">
|
|
<p class="text-white text-2xl md:text-4xl lg:text-6xl font-topsecret">
|
|
<span ref="clubName">{{ block.title || 'Østfold Milsim' }}</span>
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template> |