# ScrollAnimation 滚动翻转动画

> ScrollAnimation 使用 GSAP 与 ScrollTrigger 实现随滚动触发的 3D 分栏翻转动画，介绍视觉预览、滚动容器和源码接入方式。

原始页面：[ScrollAnimation 滚动翻转动画](http://docs.quyongqing.cn/components/scroll-animation.html)

## 说明

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

## 实时预览

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

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

## 源码位置

`src/components/scroll-animation/ScrollAnimationSection.vue`

## 基本参数

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

## 使用说明

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

## 基本使用方法

```vue
<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 基础示例**

```vue
<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>
```