<!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>