当前位置：首页 > news >正文

Vue3 卡片绑定滚动条随着滚动条展开效果 GSAP动画库 ScrollTrigger滚动条插件

news 2025/7/12 10:59:54

介绍

GSAP ScrollTrigger 插件可以将动画与滚动事件同步，基于页面滚动的位置触发动画效果。例如页面元素在进入视口时启动动画，或者在滚动过程中根据用户的滚动进度动态更新动画。

灵感来源于QQ官网，随着滚动条的滑动，慢慢展开卡片列表。
进入前
在这里插入图片描述

进入后
在这里插入图片描述

代码

<script setup>
import gsap from 'gsap';  // 导入 GSAP 动画库
import { ScrollTrigger } from "gsap/ScrollTrigger";  // 导入 GSAP 的 ScrollTrigger 插件，用于实现滚动触发动画
gsap.registerPlugin(ScrollTrigger);  // 注册 ScrollTrigger 插件，允许使用滚动触发动画
import { onMounted, ref } from "vue";  // 导入 Vue 相关的生命周期钩子和引用（ref）// 使用 Vue 的生命周期钩子 onMounted，当组件挂载到页面时执行动画
onMounted(() => {animation();  // 调用动画函数
});// 创建一个 Vue ref，作为动画目标元素的引用
const contrast = ref(null);// 定义动画函数
function animation() {gsap.fromTo(contrast.value,  // 动画的目标元素是 contrast 元素{gap: 0  // 初始状态，gap 属性设置为 0},{duration: 1,  // 动画持续时间为 1 秒ease: 'power1',  // 动画的缓动效果，'power1' 表示较为平缓的加速/减速曲线gap: 50,  // 结束时，gap 属性变化为 50scrollTrigger: {  // 使用 ScrollTrigger 插件来基于滚动位置触发动画trigger: contrast.value,  // 目标元素是 contrast 元素scrub: true,  // 启用 scrub 功能，允许滚动时平滑控制动画进度start: 'top center',  // 当元素顶部进入视口中心时触发动画end: 'bottom center'  // 当元素底部进入视口中心时结束动画}});
}
</script><template><div class="box"><div style="height: 1000px">1</div>  <!-- 这部分是用来创建滚动区域，使得滚动触发动画 --><div ref="contrast" class="contrast-box"><!-- 目标元素 contrast-box --><div class="p1"></div> <!-- 子元素 p1 --><div class="p2"></div> <!-- 子元素 p2 --><div class="p3"></div> <!-- 子元素 p3 --></div></div>
</template><style scoped>
.box {background-color: gainsboro;  /* 设置背景颜色为 gainsboro */height: 5000px;  /* 设置盒子高度，使其具有滚动条 */overflow: hidden;  /* 隐藏溢出部分 */
}.contrast-box {display: flex;  /* 使用 flexbox 布局 */justify-content: center;  /* 使内容水平居中 */align-items: center;  /* 使内容垂直居中 */
}.p1 {background: url("assets/p1,.png") no-repeat center/cover;  /* 设置背景图像 */height: 700px;  /* 设置高度 */width: 350px;  /* 设置宽度 */margin-right: -80px;  /* 设置右边距 */
}.p2 {background: url("assets/p2.png") no-repeat center/cover;  /* 设置背景图像 */height: 700px;  /* 设置高度 */width: 350px;  /* 设置宽度 */margin-top: -120px;  /* 设置上边距 */z-index: 1;  /* 设置 z-index，确保它位于其他元素上层 */
}.p3 {background: url("assets/p3.png") no-repeat center/cover;  /* 设置背景图像 */height: 700px;  /* 设置高度 */width: 350px;  /* 设置宽度 */margin-left: -80px;  /* 设置左边距 */
}
</style>