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

Vue3 GSAP动画库绑定滚动条视差效果绑定滚动条滚动条动画时间轴

article 2025/8/16 2:50:15

介绍

GSAP 用于创建高性能、可控制的动画效果。由 GreenSock 团队开发，旨在提供流畅、快速、稳定的动画效果，并且兼容各种浏览器。提供了多个插件，扩展了动画的功能，如 ScrollTrigger（滚动触发动画）、DrawSVG（绘制路径动画）、MorphSVG（路径形状变换）等。通过绑定滚动条制作动态效果。

效果

页面进前
在这里插入图片描述
随着滚动条的滚动放大

进入后

在这里插入图片描述

安装

 npm install gsap

代码

<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();  // 调用动画函数
});// 创建一个对 logo 元素的引用，后续用于获取 DOM 元素
const logo = ref(null);// 定义动画函数
function animation() {gsap.fromTo(logo.value,  // 动画的目标元素是 logo 元素{fontSize: '10vw',  // 初始字体大小为 10vwcolor: '#ffff',  // 初始文字颜色为白色textAlign: 'center',  // 初始文字居中对齐},{duration: 4,  // 动画持续时间为 4 秒ease: 'power1',  // 动画的缓动效果，'power1' 表示较为平缓的加速/减速曲线fontSize: '28vw',  // 动画结束时字体大小为 28vw（变大）color: 'transparent',  // 动画结束时文字颜色变为透明scrollTrigger: {  // 使用 ScrollTrigger 插件来基于滚动位置触发动画trigger: logo.value,  // 当 logo 元素滚动到视口时触发动画scrub: true,  // 启用 scrub 功能，允许滚动时平滑控制动画进度pin: true,  // 使元素在滚动时固定在页面上，直到动画结束start: 'top center',  // 当 logo 元素的顶部进入视口中心时开始动画end: 'bottom top'  // 当 logo 元素的底部进入视口顶部时结束动画}});
}
</script><template><!-- 这是页面的结构 --><div class="box"><!-- 用于模拟页面中的其他内容，滚动条可用来查看整个动画效果 --><div style="height: 100vh; background-color: red">14</div><!-- 这是 logo 部分，包含三个文字元素 --><div ref="logo" class="preview center"><div class="logo-text-1">哪</div>  <!-- logo 的第一部分文字 --><div class="logo-text-2">旅</div>  <!-- logo 的第二部分文字 --><div class="logo-text-3">行</div>  <!-- logo 的第三部分文字 --></div></div>
</template><style scoped>
/* 定义页面的整体样式 */
.box {background-color: #c36ed9;  /* 设置背景颜色为紫色 */height: 5000px;  /* 设置 box 的高度为 5000px，确保页面有足够的高度可以滚动 */overflow: hidden;  /* 防止超出 box 的内容显示出来 */
}/* 定义每个 logo 部分的样式 */
.logo-text-1 {background: url("assets/site_1.jpeg") no-repeat center/cover;  /* 设置 logo-text-1 的背景图像，并使其覆盖整个区域 */background-clip: text;  /* 将背景应用到文本上，实现文字填充背景图像 */font-weight: bold;  /* 设置字体加粗 */
}.logo-text-2 {background: url("assets/site_2.jpg") no-repeat center/cover;  /* 设置 logo-text-2 的背景图像 */background-clip: text;  /* 将背景应用到文本上 */font-weight: bold;  /* 字体加粗 */
}.logo-text-3 {background: url("assets/site_3.jpg") no-repeat center/cover;  /* 设置 logo-text-3 的背景图像 */background-clip: text;  /* 将背景应用到文本上 */font-weight: bold;  /* 字体加粗 */
}/* 居中对齐 logo 元素 */
.center {display: flex;  /* 使用 Flexbox 布局 */justify-content: center;  /* 水平居中 */align-items: center;  /* 垂直居中 */
}
</style>

效果灵感来源QQ官网
在这里插入图片描述

页面进入时推进动画

页面进入时
在这里插入图片描述

页面进入后

在这里插入图片描述

<template><div class="box"><!-- 这是标题容器，用来显示 "去哪旅行" --><div class="title-text"><h1>去哪旅行</h1></div></div>
</template><style scoped>
/* 外层容器，设置背景颜色和高度 */
.box{background-color: royalblue; /* 设置背景颜色为皇家蓝 */height: 1000px; /* 设置容器的高度为1000px */overflow: hidden; /* 隐藏溢出的内容 */
}/* 标题样式 */
.title-text{text-align: center; /* 文字居中对齐 */display: flex; /* 使用flexbox来居中元素 */align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中 */font-size: 8vw; /* 字体大小为视口宽度的8% */background: url("assets/site_4.png") no-repeat center/cover; /* 使用背景图，居中且覆盖容器 */background-clip: text; /* 背景裁剪为文字形状 */color: transparent; /* 文字颜色设置为透明，使背景图显示 */animation: scale 3s forwards; /* 添加动画效果：缩放动画 */white-space: nowrap; /* 禁止文字换行 */letter-spacing: 0.1em; /* 调整字间距，增加文字间的空隙 */
}/* 动画定义 */
@keyframes scale {from{font-size: 30vw; /* 初始字体大小为30vw（视口宽度的30%） */}to{font-size: 8vw; /* 动画结束时字体大小为8vw */color: #ffff; /* 文字颜色为白色 *//* 为文字添加发光效果 */text-shadow: 0 0 5px rgba(255, 255, 255, 0.7), /* 第一个阴影效果 */0 0 10px rgba(255, 255, 255, 0.7), /* 第二个阴影效果 */0 0 20px rgba(255, 255, 255, 0.7); /* 第三个阴影效果 */}
}</style>