97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<template>
|
|
|
|
<section class="hero" ref="hero">
|
|
<HeroTitle class="hero__title" />
|
|
<Transition name="fade-in">
|
|
<HeroArrowDown class="hero__arrow-down" v-show="isVisible" />
|
|
</Transition>
|
|
</section>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
// --------------------------------------------------
|
|
// DATA
|
|
// --------------------------------------------------
|
|
|
|
const hero = ref();
|
|
const isVisible = ref(true);
|
|
|
|
// --------------------------------------------------
|
|
// LOGIC
|
|
// --------------------------------------------------
|
|
|
|
const toggleArrowDown = () => {
|
|
if (hero.value) {
|
|
if (window.innerHeight / 2 < hero.value.getBoundingClientRect().bottom) {
|
|
isVisible.value = true;
|
|
} else {
|
|
isVisible.value = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// PROGRAM
|
|
// --------------------------------------------------
|
|
|
|
onMounted(() => {
|
|
toggleArrowDown();
|
|
window.addEventListener('scroll', toggleArrowDown);
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener('scroll', toggleArrowDown);
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
// --------------------------------------------------
|
|
// STYLE
|
|
// --------------------------------------------------
|
|
|
|
.hero {
|
|
@include large-section;
|
|
height: 100vh;
|
|
height: 100svh;
|
|
display: grid;
|
|
grid:
|
|
'.' 1fr
|
|
'title' auto
|
|
'.' minmax(6rem, 1fr)
|
|
'arrow-down' var(--regular-icon-wrapper-size)
|
|
/ 100%;
|
|
place-content: center;
|
|
place-items: center;
|
|
|
|
&__title {
|
|
grid-area: title;
|
|
}
|
|
|
|
&__arrow-down {
|
|
grid-area: arrow-down;
|
|
}
|
|
}
|
|
|
|
// Transition component
|
|
|
|
.fade-in {
|
|
|
|
&-enter-from,
|
|
&-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-2rem);
|
|
}
|
|
|
|
&-enter-active,
|
|
&-leave-active {
|
|
transition:
|
|
opacity 400ms ease-in-out,
|
|
transform 400ms ease-in-out;
|
|
}
|
|
}
|
|
|
|
</style>
|