diff --git a/app/components/home/HomeHero.vue b/app/components/home/HomeHero.vue index 79923bb..ff1c63d 100644 --- a/app/components/home/HomeHero.vue +++ b/app/components/home/HomeHero.vue @@ -33,9 +33,15 @@ const play = () => new Promise((resolve) => { const studioChars = gsap.utils.toArray('.hero-studio-char', studioNameRef.value) const tm = brandNameRef.value?.querySelector('.hero-brand-tm') - // 初始隐藏底部文字:通过 autoAlpha (opacity + visibility) 控制,不仅下移而且完全不可见 + // 获取所有需要统一从下浮现的其他文本节点(服务列表、描述、版权等) + const fadeUpItems = gsap.utils.toArray('.hero-fade-up', heroPanelRef.value) + + // 初始隐藏底部大字文字 gsap.set([...brandChars, ...studioChars], { yPercent: 110, autoAlpha: 0 }) if (tm) gsap.set(tm, { autoAlpha: 0 }) + + // 初始隐藏需要向上浮现的小字文本节点 + gsap.set(fadeUpItems, { y: 20, autoAlpha: 0 }) // 执行入场动画:将 Hero 整体容器从屏幕下方(yPercent: 100)滑入屏幕(yPercent: 0) gsap.to(heroRef.value, { @@ -62,6 +68,13 @@ const play = () => new Promise((resolve) => { duration: 0.6, ease: 'power2.out' }, '-=0.4') + .to(fadeUpItems, { + y: 0, + autoAlpha: 1, + duration: 0.8, + ease: 'power3.out', + stagger: 0.04 // 稍微错开一点点时间,或者设为 0 完全同时 + }, '-=0.6') // 让它们在大字动画快结束时出现 } }, onComplete: resolve, @@ -198,63 +211,65 @@ defineExpose({ play })
-

{{ t('hero.services.webDesign') }}

-

{{ t('hero.services.socialMedia') }}

-

{{ t('hero.services.marketing') }}

-

{{ t('hero.services.development') }}

-

{{ t('hero.services.seo') }}

+

{{ t('hero.services.webDesign') }}

+

{{ t('hero.services.socialMedia') }}

+

{{ t('hero.services.marketing') }}

+

{{ t('hero.services.development') }}

+

{{ t('hero.services.seo') }}

-
-

- {{ t('hero.description') }} -

-
- -
+
+

+ {{ t('hero.description') }} +

+
+ + + +
- - + +
-
-
-
-
+
+
+
+
@@ -275,7 +290,7 @@ defineExpose({ play })
-

© {{ new Date().getFullYear() }} {{ t('app.brand') }}™ {{ t('nav.studio') }}

+

© {{ new Date().getFullYear() }} {{ t('app.brand') }}™ {{ t('nav.studio') }}