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