一、视差效果原理

多层背景 + 差异速度 + 透视效果 = 沉浸式体验

二、核心实现技术

1. 视差容器设置

.parallax-container {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px; /* 关键透视设置 */
    transform-style: preserve-3d;
    scroll-behavior: smooth;
}

2. 视差图层控制

.parallax-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.layer-1 {
    transform: translateZ(-1px) scale(2); /* 远处图层移动慢 */
}

.layer-2 {
    transform: translateZ(-2px) scale(3); /* 更远的图层移动更慢 */
}

.layer-front {
    transform: translateZ(0); /* 前景正常速度 */
}

3. 滚动动画触发

@keyframes parallax-scroll {
    from { transform: translateY(0) translateZ(0); }
    to { transform: translateY(-50%) translateZ(-1px); }
}

.parallax-element {
    animation: parallax-scroll linear;
    animation-timeline: scroll();
    animation-range: 0% 100%;
}

三、高级应用技巧

1. 视差画廊实现

.gallery-item {
    --parallax-speed: calc(var(--index) * 0.1);
    
    transform: 
        translateY(calc(var(--scroll-pos) * var(--parallax-speed)))
        rotate(calc(var(--scroll-pos) * 0.5deg));
    transition: transform 0.1s ease-out;
}

2. 性能优化方案

• will-change：提前告知浏览器变化属性
• contain：限制重绘范围
• 硬件加速：transform和opacity优先
• 图片优化：WebP格式+懒加载

四、完整案例演示

1. HTML结构

<div class="parallax-container">
    <div class="parallax-layer layer-1">
        <img src="https://example.com/bg1.jpg" alt="远处山脉">
    </div>
    <div class="parallax-layer layer-2">
        <img src="https://example.com/bg2.png" alt="中景树林">
    </div>
    <div class="content-layer">
        <!-- 主要内容区域 -->
    </div>
</div>

2. 效果增强技巧

/* 添加模糊效果增强深度感 */
.layer-1 img {
    filter: blur(2px);
}

/* 前景元素添加轻微浮动效果 */
.content-layer {
    animation: float 3s ease-in-out infinite alternate;
}

@keyframes float {
    from { transform: translateY(0); }
    to { transform: translateY(-20px); }
}