ScrollAnimation 滚动翻转动画

说明

用于展示“随滚动触发的 3D 翻转分栏动画”，适合首页视觉区、品牌展示页、作品集封面或活动专题头图等偏氛围感场景。

实时预览

组件内部基于 GSAP + ScrollTrigger 实现，滚动时会先缩放，再依次翻转三个面板，最后恢复原始尺寸。

当前版本不提供外部参数，图片资源和动画节奏都写在组件内部，更适合固定视觉展示场景。

源码位置

src/components/scroll-animation/ScrollAnimationSection.vue

基本参数

参数	类型	默认值	说明
无	-	-	当前版本为固定视觉动画组件，图片资源和滚动节奏均内置在组件内部。

使用说明

• 组件内部依赖 gsap 和 gsap/ScrollTrigger。
• 默认高度为 200vh，内部使用 sticky + perspective 构建滚动舞台。
• 当前会从本地图片资源中随机选两张图作为正反面贴图，每次刷新页面效果可能不同。
• 如果外层有自定义滚动容器，组件会优先尝试挂到最近的 .terminal-effect-page-container。

基本使用方法

<template>
  <section class="landing-section">
    <ScrollAnimationSection />
  </section>
</template>

<script setup lang="ts">
import ScrollAnimationSection from '@/components/scroll-animation/ScrollAnimationSection.vue'
</script>

<style scoped>
.landing-section {
  background: #000;
}
</style>

代码示例

Scroll Animation 基础示例点击展开

<template>
  <section class="landing-section">
    <ScrollAnimationSection />
  </section>
</template>

<script setup lang="ts">
import ScrollAnimationSection from '@/components/scroll-animation/ScrollAnimationSection.vue'
</script>

<style scoped>
.landing-section {
  background: #000;
}
</style>