gsap实现文字动画效果02
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
}
.allbox {
display: flex;
flex-direction: column; /* 设置为纵向排列 */
height: 300%; /* 为了确保内容高度超过视口，可以设置一个足够高的值 */
overflow-y: auto; /* 当内容溢出时显示垂直滚动条 */
}
.allbox > div {
flex: 1; /* 让每个子元素占满可用空间 */
border-top: 5px solid black;
background-color: yellow;
}
.allbox > div:nth-child(2) {
background-color: white; /* 将第二个子元素的背景颜色更改为白色 */
}
.module-five-box {
width: 1329px;
margin: auto;
padding-top: 200px;
padding-bottom: 200px;
text-align: center;
display: flex;
flex-direction: column; /* 设置为纵向排列 */
align-items: center;
height: auto;
}
.module-five-text-01 {
font-size: 44px;
line-height: 51px;
background: linear-gradient(to right, #28AADC, #214083);
-webkit-background-clip: text; /* 添加-webkit-前缀以适应一些浏览器 */
background-clip: text;
color: transparent; /* 使文字变为透明，以显示渐变背景 */
font-family: "Overpass-Regular";
margin-top: 30px;
flex: 1; /* 让每个子元素占满可用空间 */
/* display: none; */
visibility: hidden; /* 设置为隐藏 */
}
.module-five-text-02 {
font-size: 114px;
line-height: 152px;
background: linear-gradient(to right, #28AADC, #214083);
-webkit-background-clip: text; /* 添加-webkit-前缀以适应一些浏览器 */
background-clip: text;
color: transparent; /* 使文字变为透明，以显示渐变背景 */
font-family: "Overpass-Black";
margin-top: 30px;
flex: 1; /* 让每个子元素占满可用空间 */
/* display: none; */
visibility: hidden; /* 设置为隐藏 */
}
.module-five-text-03 {
font-size: 66px;
line-height: 92px;
background: linear-gradient(to right, #28AADC, #214083);
-webkit-background-clip: text; /* 添加-webkit-前缀以适应一些浏览器 */
background-clip: text;
color: transparent; /* 使文字变为透明，以显示渐变背景 */
font-family: "Overpass-Bold";
margin-top: 30px;
flex: 1; /* 让每个子元素占满可用空间 */
/* display: none; */
visibility: hidden; /* 设置为隐藏 */
}
style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
head>
<body>
<div class="allbox">
<div>Content 1div>
<div class="module-five-all-box">
<div class="module-five-box">
<div class="module-five-text-01" id="dhtext01">
We Aim to Create a
div>
<div class="module-five-text-02" id="dhtext02">
MICRO-GENERATION
div>
<div class="module-five-text-03" id="dhtext03">
FUTURE
div>
div>
div>
<div>Content 3div>
div>
<script>
// 创建一个加载脚本的函数
function loadScript(url, callback){
var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
script.onload = callback;
document.head.appendChild(script);
}
// 依次加载 GSAP 和 ScrollTrigger
loadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js", function(){
console.log("GSAP loaded successfully!");
// 在加载 GSAP 后再加载 ScrollTrigger
loadScript("https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js", function(){
console.log("ScrollTrigger loaded successfully!");
var tl = gsap.timeline({
scrollTrigger: {
trigger: ".module-five-box",
start: "top bottom", // 触发点为容器的中心
end: "center center",
scrub: 1, // 平滑擦洗，根据滚动速度调整动画的进度
},
});
$(".module-five-text-01, .module-five-text-02, .module-five-text-03").each(function(index, element) {
tl.fromTo(
element,
{ opacity: 0, y: -200, visibility: "hidden" }, // 初始设置为透明，上移50像素，隐藏
{
opacity: 1,
y: 0,
visibility: "visible", // 设置为可见
duration: 1,
ease: "power3.inOut",
},
// 0.8,// 每个文字的动画之间间隔0.8秒
">0.1"
);
});
});
});
// 在这里可以使用 GSAP 和 ScrollTrigger 进行动画等操作
// 学习进度第一步官网https://gsap.com/
// 需要的动画模块创建动画
/*
duration：动画持续时间2秒
y:轴正的就是向下移动200px
ease: 动画效果
(power0运动到目标位置，不会返回，也就是移动200px后在200px，像素的位置)，
(power1运动到目标位置，不会返回，也就是移动200px后在200px，像素的位置)，
(power2运动到目标位置，不会返回，也就是移动200px后在200px，像素的位置)
(power3运动到目标位置，不会返回，也就是移动200px后在200px，像素的位置)
(power4运动到目标位置，不会返回，也就是移动200px后在200px，像素的位置)
区别我觉得就是运动速度的区别
所有动画效果的网址https://gsap.com/docs/v3/Eases
*/
/*
//写相同的只会保留第二个
gsap.to("#dhtext01", {y: 200, duration: 2 ,ease: "sine" });
gsap.to("#dhtext01", {y: -200, duration: 2 ,ease: "sine" });
//其他添加动画的方法
学习进度第二步
gsap.from();配置和上面一样的先是，选择器，然后是option
//配置两个从什么到什么，正负是相对位置是从你当前的div的位置算的，html的坐标系不同比如top:100px;是向下100px
gsap.fromTo(".box", { opacity: 0 }, { opacity: 0.5, duration: 1 });
*/
// gsap.fromTo("#dhtext01", {y: -200,ease: "sine" },{y: 0, duration: 2 ,ease: "sine" });
// gsap.fromTo("#dhtext02", {y: -200,ease: "sine" },{y: 0, duration: 2 ,ease: "sine" });
// gsap.fromTo("#dhtext03", {y: -200,ease: "sine" },{y: 0, duration: 2 ,ease: "sine" });
/*
创建时间线
var tl = gsap.timeline();
*/
// debugger
// var tl = gsap.timeline({
// scrollTrigger: {
// trigger: ".module-five-text-02",
// pin: true, // 激活时固定触发器元件
// start: "top top", // 当触发器的顶部碰到视窗的顶部时
// end: "+=500", // 滚动超过起始点500px后结束
// scrub: 1, // 平滑擦洗，需要1秒“赶上”滚动条
// snap: {
// snapTo: "labels", //捕捉到时间轴上最近的标签
// duration: { min: 0.2, max: 5 }, //快照动画至少0.2秒，但不超过3秒(由速度决定)
// delay: 0.2, //从最后一个滚动事件开始等待0.2秒，然后再进行捕捉
// ease: "power1.inOut", //快照动画的易用性(默认为“power3”)
// },
// },
// });
// tl.addLabel("start", 1)
// .fromTo("#dhtext01", {y: -200,ease: "sine",display:"block",},{y: 0, duration: 2 ,ease: "sine"},"start")
// .fromTo("#dhtext02", {y: -200,ease: "sine",display:"block", },{y: 0, duration: 2 ,ease: "sine"},"start+=2")
// .fromTo("#dhtext03", {y: -200,ease: "sine",display:"block",},{y: 0, duration: 2 ,ease: "sine"},"start+=4");
// tl.seek("start");
script>
body>
html>
js+css实现监听鼠标滚动的文字动画效果