virtheart/arcticnewone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(页脚): 添加多语言支持和动画效果

Browse Source 
重构页脚组件，增加中英文翻译支持
创建 FooterLogo 和 AnimatedButton 通用组件
实现滚动动画和按钮悬停效果
This commit is contained in:
chenchun
2026-04-27 21:07:22 +08:00
parent e6e0426d25
commit 0a738e2074
6 changed files with 435 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/home/HomeHero.vue
+9 -38
View File
@@ -3,6 +3,7 @@ import { onMounted, onBeforeUnmount, ref } from 'vue'
import { useNuxtApp } from '#app'
import { useI18n } from 'vue-i18n'
import gsap from 'gsap'
import AnimatedButton from '~/components/common/AnimatedButton.vue'
const { t } = useI18n()
@@ -82,6 +83,13 @@ const play = () => new Promise<void>((resolve) => {
})
// 设置页面向下滚动时的视差缩放逻辑（绑定到 Lenis 的平滑滚动数值上）
onMounted(() => {
// 组件挂载时，先将整个 Hero 强行置于屏幕下方，等待外部调用 `play()` 才滑入
if (heroRef.value) gsap.set(heroRef.value, { yPercent: 100 })
// 初始化滚动监听逻辑
setupHeroScroll()
})
const setupHeroScroll = () => {
if (!heroStageRef.value || !heroPanelRef.value) return
@@ -126,44 +134,7 @@ const setupHeroScroll = () => {
cleanupHeroScroll = () => gsap.ticker.remove(updateHeroPanelScale)
}
const onTalkHover = () => {
if (!talkBtnRef.value) return
const origs = talkBtnRef.value.querySelectorAll('.btn-char-orig')
const clones = talkBtnRef.value.querySelectorAll('.btn-char-clone')
const bg = talkBtnRef.value.querySelector('.btn-bg-hover')
// 背景从底部滑入 (yPercent: 100 -> 0)
gsap.to(bg, { yPercent: 0, duration: 0.4, ease: 'power3.out', overwrite: true })
gsap.to(origs, { yPercent: -100, duration: 0.4, stagger: { amount: 0.2, from: 'start' }, ease: 'power3.out', overwrite: true })
gsap.to(clones, { yPercent: 0, duration: 0.4, stagger: { amount: 0.2, from: 'start' }, ease: 'power3.out', overwrite: true })
}
const onTalkLeave = () => {
if (!talkBtnRef.value) return
const origs = talkBtnRef.value.querySelectorAll('.btn-char-orig')
const clones = talkBtnRef.value.querySelectorAll('.btn-char-clone')
const bg = talkBtnRef.value.querySelector('.btn-bg-hover')
// 背景向下反向滑出回收 (yPercent: 0 -> 100)
gsap.to(bg, { yPercent: 100, duration: 0.4, ease: 'power3.out', overwrite: true })
gsap.to(origs, { yPercent: 0, duration: 0.4, stagger: { amount: 0.2, from: 'end' }, ease: 'power3.out', overwrite: true })
gsap.to(clones, { yPercent: 100, duration: 0.4, stagger: { amount: 0.2, from: 'end' }, ease: 'power3.out', overwrite: true })
}
onMounted(() => {
if (talkBtnRef.value) {
const clones = talkBtnRef.value.querySelectorAll('.btn-char-clone')
const bg = talkBtnRef.value.querySelector('.btn-bg-hover')
gsap.set(clones, { yPercent: 100 })
gsap.set(bg, { yPercent: 100 })
}
// 组件挂载时，先将整个 Hero 强行置于屏幕下方，等待外部调用 `play()` 才滑入
if (heroRef.value) gsap.set(heroRef.value, { yPercent: 100 })
// 初始化滚动监听逻辑
setupHeroScroll()
})
// 设置页面向下滚动时的视差缩放逻辑（绑定到 Lenis 的平滑滚动数值上）
onBeforeUnmount(() => {
cleanupHeroScroll?.()