gsap-高级滚动

 // 注册ScrollTrigger插件
        gsap.registerPlugin(ScrollTrigger);

        // 创建浮动元素
        const floatingElements = document.querySelector('.floating-elements');
        for(let i = 0; i < 10; i++) {
            const element = document.createElement('div');
            element.className = 'float-item';
            element.style.left = `${Math.random() * 100}%`;
            element.style.top = `${Math.random() * 100}%`;
            floatingElements.appendChild(element);
        }

        // 进度条动画
        gsap.to('.progress', {
            width: '100%',          // 宽度变化到100%
            ease: 'none',           // 无缓动效果（线性变化）
            scrollTrigger: {
                trigger: 'body',          // 触发元素是整个body
                start: 'top top',         // 开始点：页面顶部对齐视窗顶部
                end: 'bottom bottom',     // 结束点：页面底部对齐视窗底部
                scrub: 0.3                // 平滑滚动效果，0.3秒的平滑过渡
            }
        });

        // 视差背景效果
        gsap.to('.parallax-section', {
            backgroundPosition: '50% 100%', // 背景位置变化到中心底部
            ease: 'none',                   // 无缓动效果（线性变化）
            scrollTrigger: {
                trigger: '.parallax-section', // 触发元素是视差部分
                start: 'top top',            // 开始点：元素顶部对齐视窗顶部
                end: 'bottom top',           // 结束点：元素底部对齐视窗顶部
                scrub: true                  // 启用平滑滚动，跟随滚动条移动
            }
        });

        // 浮动元素动画
        document.querySelectorAll('.float-item').forEach((item, index) => {
            gsap.to(item, {
                y: `${Math.random() * 200 - 100}`, // Y轴随机移动范围：-100到100像素
                x: `${Math.random() * 200 - 100}`, // X轴随机移动范围：-100到100像素
                ease: 'none',                      // 无缓动效果（线性变化）
                scrollTrigger: {
                    trigger: '.parallax-section',   // 触发元素是视差部分
                    start: 'top top',              // 开始点：元素顶部对齐视窗顶部
                    end: 'bottom top',             // 结束点：元素底部对齐视窗顶部
                    scrub: 1                       // 1秒的平滑滚动过渡
                }
            });
        });

        // 内容淡入效果
        document.querySelectorAll('.content').forEach(content => {
            gsap.from(content, {
                opacity: 0,             // 初始完全透明
                y: 50,                 // 初始Y轴偏移50像素
                duration: 1,           // 动画持续时间1秒
                scrollTrigger: {
                    trigger: content,         // 触发元素是当前内容
                    start: 'top 80%',        // 开始点：元素顶部到达视窗80%位置
                    end: 'top 20%',          // 结束点：元素顶部到达视窗20%位置
                    toggleActions: 'play none none reverse' // 滚动行为：播放-无-无-反向
                }
            });
        });

        // 固定元素动画
        ScrollTrigger.create({
            trigger: '.sticky-element',   // 触发元素
            pin: true,                    // 启用固定定位
            start: 'center center',       // 开始点：元素中心对齐视窗中心
            end: '+=500',                 // 结束点：向下滚动500像素后
            onEnter: () => {             // 进入视图时的回调函数
                gsap.to('.sticky-element', {
                    scale: 1.2,          // 放大到1.2倍
                    rotation: 360,       // 旋转360度
                    duration: 1          // 动画持续时间1秒
                });
            },
            onLeaveBack: () => {         // 向上滚动离开时的回调函数
                gsap.to('.sticky-element', {
                    scale: 1,            // 恢复原始大小
                    rotation: 0,         // 恢复原始角度
                    duration: 1          // 动画持续时间1秒
                });
            }
        });