style: 页面动画效果
This commit is contained in:
209
src/views/AwardPage/components/ApplySection.vue
Normal file
209
src/views/AwardPage/components/ApplySection.vue
Normal file
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<div class="apply-container container flex flex-col" ref="applyRef">
|
||||
<div class="title" ref="applyTitleRef">How to Apply</div>
|
||||
<div class="sub-title" ref="applySubTitleRef">Requirments</div>
|
||||
<div class="requirments-list flex" ref="reqListRef">
|
||||
<div class="left flex flex-col space-between">
|
||||
<div class="item-box" v-for="item in leftRequirment" :key="item.type">
|
||||
<div class="item-header flex align-center">
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
<div class="item-title">{{ item.type }}</div>
|
||||
</div>
|
||||
<div class="context" v-for="el in item.desc">
|
||||
{{ el }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="item-box">
|
||||
<div class="item-box">
|
||||
<div class="item-header flex align-center">
|
||||
<img src="@/assets/images/award/bloom_logo.png" class="logo" />
|
||||
<div class="item-title">{{ rightRequirment.type }}</div>
|
||||
</div>
|
||||
<div class="context" v-for="el in rightRequirment.desc">
|
||||
{{ el }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { gsap } from 'gsap'
|
||||
|
||||
const leftRequirment = ref([
|
||||
{
|
||||
type: 'Video',
|
||||
desc: ['The process of doing design']
|
||||
},
|
||||
{
|
||||
type: 'Design',
|
||||
desc: [
|
||||
'Structure: design title, moodboard and elaboration (how will you use AiDA to design)',
|
||||
'Design sketch: Maximum 4 outfit design with proposed materials'
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const rightRequirment = ref({
|
||||
type: 'Submission Format',
|
||||
desc: [
|
||||
'Naming as “AiDA global award 2026_applicantname”',
|
||||
'Mp4\n(1080x1920pixels/20mb within 1min)',
|
||||
'Single PDF file\n(within 15 pages, maximum 20mb)',
|
||||
'English or native language\nwith English translation'
|
||||
]
|
||||
})
|
||||
|
||||
const applyRef = ref<HTMLElement | null>(null)
|
||||
const applyTitleRef = ref<HTMLElement | null>(null)
|
||||
const applySubTitleRef = ref<HTMLElement | null>(null)
|
||||
const reqListRef = ref<HTMLElement | null>(null)
|
||||
const hasPlayedApplyAnim = ref(false)
|
||||
let applyObserver: IntersectionObserver | null = null
|
||||
|
||||
const setupApplyInitialState = () => {
|
||||
const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
|
||||
Boolean
|
||||
) as HTMLElement[]
|
||||
if (titleEls.length) {
|
||||
gsap.set(titleEls, {
|
||||
opacity: 0,
|
||||
scale: 0,
|
||||
transformOrigin: '50% 50%'
|
||||
})
|
||||
}
|
||||
const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
|
||||
const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
|
||||
gsap.set([headers, contexts], { opacity: 0 })
|
||||
}
|
||||
|
||||
const playApplyAnimation = () => {
|
||||
if (hasPlayedApplyAnim.value) return
|
||||
const titleEls = [applyTitleRef.value, applySubTitleRef.value].filter(
|
||||
Boolean
|
||||
) as HTMLElement[]
|
||||
const headers = reqListRef.value?.querySelectorAll<HTMLElement>('.item-header')
|
||||
const contexts = reqListRef.value?.querySelectorAll<HTMLElement>('.context')
|
||||
if (!titleEls.length) return
|
||||
|
||||
const tl = gsap.timeline({ defaults: { ease: 'power2.out' } })
|
||||
tl.to(titleEls, {
|
||||
opacity: 1,
|
||||
scale: 1,
|
||||
duration: 0.6,
|
||||
ease: 'back.out(1.6)',
|
||||
stagger: 0.1
|
||||
})
|
||||
if (headers?.length) {
|
||||
tl.to(
|
||||
headers,
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.4,
|
||||
stagger: 0.1
|
||||
},
|
||||
'-=0.1'
|
||||
)
|
||||
}
|
||||
if (contexts?.length) {
|
||||
tl.to(
|
||||
contexts,
|
||||
{
|
||||
opacity: 1,
|
||||
duration: 0.4,
|
||||
stagger: 0.05
|
||||
},
|
||||
'-=0.05'
|
||||
)
|
||||
}
|
||||
|
||||
hasPlayedApplyAnim.value = true
|
||||
applyObserver?.disconnect()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
setupApplyInitialState()
|
||||
if ('IntersectionObserver' in window) {
|
||||
applyObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
playApplyAnimation()
|
||||
}
|
||||
})
|
||||
},
|
||||
{ threshold: 0.25 }
|
||||
)
|
||||
if (applyRef.value) applyObserver.observe(applyRef.value)
|
||||
} else {
|
||||
playApplyAnimation()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
applyObserver?.disconnect()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.apply-container {
|
||||
flex: 1;
|
||||
background: url('@/assets/images/award/apply_bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 12.7rem 0 16.9rem;
|
||||
.title {
|
||||
text-align: center;
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 4rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.sub-title {
|
||||
text-align: center;
|
||||
color: #b10000;
|
||||
font-size: 3rem;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
}
|
||||
.requirments-list {
|
||||
flex: 1;
|
||||
padding-left: 41.4rem;
|
||||
column-gap: 17.7rem;
|
||||
margin-top: 12rem;
|
||||
.left {
|
||||
color: #232323;
|
||||
height: 100%;
|
||||
}
|
||||
.item-box {
|
||||
.item-header {
|
||||
column-gap: 3.2rem;
|
||||
.item-title {
|
||||
color: #232323;
|
||||
font-family: 'PoppinsBold';
|
||||
font-weight: 600;
|
||||
font-size: 2.8rem;
|
||||
}
|
||||
}
|
||||
.context {
|
||||
margin-top: 4rem;
|
||||
width: 46.8rem;
|
||||
color: #585858;
|
||||
font-family: 'Arial';
|
||||
font-weight: 400;
|
||||
line-height: 3rem;
|
||||
font-size: 2.4rem;
|
||||
padding-left: 5.6rem;
|
||||
white-space: pre-line;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user