视差滚动原理

    <div class="image" style="background-image: url(./屏幕截图\ 2026-02-27\ 174104.png);"></div>
    <div class="heading">
        <h1>When you are confused</h1>
    </div>
    <div class="text">
        <h1>Set goals in your mind</h1>
    </div>

    <div class="image" style="background-image: url(./屏幕截图\ 2026-02-27\ 174405.png);"></div>
    <div class="heading">
        <h1>When you are confused</h1>
    </div>
    <div class="text">
        <h1>Set goals in your mind</h1>
    </div>

    <div class="image" style="background-image: url(./屏幕截图\ 2026-02-27\ 174530.png);"></div>
    <div class="heading">
        <h1>When you are confused</h1>
    </div>
    <div class="text">
        <h1>Set goals in your mind</h1>
    </div>
</div>

视差滚动的核心是视觉深度差：离 “观察者” 越远的元素，滚动时移动速度越慢；越近的元素移动越快通过简单的css即可 1. 透视基础：通过`perspective`给容器添加 3D 透视，模拟视觉深度； 2. Z 轴偏移：利用`translateZ()`让不同元素在 3D 空间中处于不同深度（背景后移、标题前移）； 3. 速度差：不同 Z 轴深度的元素，滚动时呈现不同移动速度，形成视差效果； 4. 缩放补偿：`scale()`抵消 Z 轴偏移导致的元素缩放，保证视觉上的正常显示。

简单来说：Z 轴数值越小（负数），元素离观察者越远，滚动速度越慢；Z 轴数值越大（正数），元素离观察者越近，滚动速度越快，速度差就是视差效果的本质。

JS视差滚动 * { padding: 0; margin: 0; box-sizing: border-box; } /* 容器样式 */ .parallax-container { position: relative; width: 100%; /* 足够的高度让页面可滚动 */ min-height: 300vh; overflow: hidden; } /* 视差背景层（最慢） */ .parallax-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-size: cover; background-position: center; /* 初始位置 */ transform: translateY(0); /* 性能优化：开启硬件加速 */ will-change: transform; z-index: 1; } /* 视差标题层（中等速度） */ .parallax-title { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 48px; text-shadow: 0 0 15px rgba(0,0,0,0.7); z-index: 2; } /* 普通内容层（正常速度） */ .content-section { position: relative; top: 100vh; width: 100%; height: 100vh; background-color: rgba(255,255,255,0.9); display: flex; justify-content: center; align-items: center; font-size: 36px; color: #333; z-index: 3; margin-bottom: 100vh; }

<script>
    // 获取视差元素
    const bgElement = document.querySelector('.parallax-bg');
    const titleElement = document.querySelector('.parallax-title');
    
    // 定义视差系数（越小越慢，越大越快）
    const BG_PARALLAX_SPEED = 0.3; // 背景移动速度（慢）
    const TITLE_PARALLAX_SPEED = 0.6; // 标题移动速度（中等）

    // 监听滚动事件
    function handleParallax() {
        // 获取当前滚动距离（垂直方向）
        const scrollY = window.pageYOffset || document.documentElement.scrollTop;
        
        // 1. 计算背景的移动距离：滚动距离 * 视差系数
        const bgTranslateY = scrollY * BG_PARALLAX_SPEED;
        bgElement.style.transform = `translateY(${bgTranslateY}px)`;
        
        // 2. 计算标题的移动距离（可反向，增加视觉层次）
        const titleTranslateY = -scrollY * TITLE_PARALLAX_SPEED;
        titleElement.style.transform = `translate(-50%, calc(-50% + ${titleTranslateY}px))`;
    }

    // 绑定滚动事件（优化：使用requestAnimationFrame提升性能）
    let ticking = false;
    window.addEventListener('scroll', () => {
        if (!ticking) {
            requestAnimationFrame(() => {
                handleParallax();
                ticking = false;
            });
            ticking = true;
        }
    });

    // 初始化执行一次，确保页面加载时位置正确
    handleParallax();
</script>

- **监听滚动**：通过`scroll`事件获取页面滚动距离`scrollY`；

• 比例计算：用 “滚动距离 × 视差系数” 计算元素的移动距离，系数决定速度；

• 性能优化：使用requestAnimationFrame限制执行频率，避免卡顿；

• 灵活控制：可自定义元素移动方向（正 / 负系数）、速度，适配更多场景。