147 lines
3.6 KiB
HTML
147 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>GSAP 多元素滚动触发 + 视差效果</title>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
background-color: #f4f4f4;
|
||
|
|
margin: 0;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.parallax-bg {
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
width: 100%;
|
||
|
|
height: 120vh;
|
||
|
|
background: url('https://bj.bcebos.com/bjh-pixel/16973229531047913132_0_ainote_new.jpg') center/cover;
|
||
|
|
z-index: -1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spacer {
|
||
|
|
height: 100vh;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 24px;
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
gap: 100px;
|
||
|
|
padding: 50px 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box {
|
||
|
|
width: 150px;
|
||
|
|
height: 150px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 24px;
|
||
|
|
color: white;
|
||
|
|
font-weight: bold;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box1 {
|
||
|
|
background-color: #3498db;
|
||
|
|
transform: translateX(-200px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.box2 {
|
||
|
|
background-color: #e74c3c;
|
||
|
|
transform: translateX(200px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.box3 {
|
||
|
|
background-color: #2ecc71;
|
||
|
|
transform: translateY(100px) scale(0.5);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="parallax-bg"></div>
|
||
|
|
|
||
|
|
<div class="spacer">⬇️ 向下滚动看看动画效果 ⬇️</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="box box1">1</div>
|
||
|
|
<div class="box box2">2</div>
|
||
|
|
<div class="box box3">3</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="spacer">🎉 滚动结束 🎉</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
gsap.registerPlugin(ScrollTrigger);
|
||
|
|
|
||
|
|
// 让 box1 从左滑入
|
||
|
|
gsap.to(".box1", {
|
||
|
|
x: 0, // 从 -200px 移动到原位
|
||
|
|
opacity: 1,
|
||
|
|
duration: 1.5, // 动画时长 1.5s
|
||
|
|
ease: "power2.out",
|
||
|
|
scrollTrigger: {
|
||
|
|
trigger: ".box1",
|
||
|
|
start: "top 80%", // 当 box1 滚动到视口 80% 处时触发
|
||
|
|
end: "top 50%",
|
||
|
|
scrub: true // 让动画随滚动平滑执行
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 让 box2 从右滑入
|
||
|
|
gsap.to(".box2", {
|
||
|
|
x: 0, // 从 200px 移动到原位
|
||
|
|
opacity: 1,
|
||
|
|
duration: 1.5,
|
||
|
|
ease: "power2.out",
|
||
|
|
scrollTrigger: {
|
||
|
|
trigger: ".box2",
|
||
|
|
start: "top 85%",
|
||
|
|
end: "top 50%",
|
||
|
|
scrub: 1 // 增加动画延迟，让滚动更顺滑
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 让 box3 向上滑入并放大
|
||
|
|
gsap.to(".box3", {
|
||
|
|
y: 0,
|
||
|
|
scale: 1,
|
||
|
|
opacity: 1,
|
||
|
|
duration: 1.5,
|
||
|
|
ease: "elastic.out(1, 0.5)", // 弹性效果
|
||
|
|
scrollTrigger: {
|
||
|
|
trigger: ".box3",
|
||
|
|
start: "top 90%",
|
||
|
|
end: "top 40%",
|
||
|
|
scrub: 2 // 让动画更随滚动渐变
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 背景视差滚动
|
||
|
|
gsap.to(".parallax-bg", {
|
||
|
|
y: -100, // 让背景慢速上移
|
||
|
|
scrollTrigger: {
|
||
|
|
trigger: "body",
|
||
|
|
start: "top top",
|
||
|
|
end: "bottom top",
|
||
|
|
scrub: 3 // 让背景滚动缓慢
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|