feat: 为首页新增板块添加 ScrollTrigger pin 滚动效果

 新增 pin 效果(板块固定,内容随滚动切换):

1. HomeTestimonials - 客户评价
   - 固定板块,滚动自动切换卡片
   - 每屏切换一张评价卡片

2. HomeTechStack - 技术栈
   - 固定板块,3D 球体自动旋转一圈
   - 滚动控制旋转进度

3. HomeProcess - 创意流程
   - 固定板块,横向滚动浏览所有步骤
   - 6 个步骤依次展示

4. HomeServices - 服务能力
   - 固定板块,逐张卡片聚焦展示
   - 聚焦卡片放大,其他缩小变暗
   - 所有卡片飞入归位后逐个聚焦

5. HomeAchievements - 数字成就
   - 固定板块,逐个成就项展示
   - 每个数字滚动计数动画触发

6. HomeUpdates - 最新动态
   - 固定板块,逐批展示卡片
   - 分批出现,每批 3 个卡片

🎯 效果:
- 滚动到板块时自动固定(pin)
- 内部元素随滚动依次展示
- 所有内部元素展示完毕后才继续下一个板块
- 每个板块独特的 pin 动画效果

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
陈春
2026-06-03 19:49:18 +08:00
parent 89c4c4c7b5
commit bb0020b406
6 changed files with 208 additions and 76 deletions
+20
View File
@@ -229,6 +229,26 @@ onMounted(async () => {
}
)
})
// Pin 滚动效果:固定板块,球体旋转一圈展示所有技术
const rotationTimeline = gsap.timeline()
rotationTimeline.to(autoRotation.value, {
y: 360,
duration: 3,
ease: 'none',
onUpdate: updatePositions
})
ScrollTrigger.create({
trigger: rootRef.value,
start: 'top top',
end: () => `+=${window.innerHeight * 2}`,
pin: true,
scrub: 1,
anticipatePin: 1,
animation: rotationTimeline,
})
}, rootRef.value)
// 启动自动旋转