CSS怎样实现视差滚动_background_attachment

<div class="parallax-section"   style="max-width:90%"image1.jpg');">
    <div class="content">
        <h2>这是第一个视差区块</h2>
        <p>这里有一些文字内容，你会发现背景图片是固定的。</p>
    </div>
</div>

<div class="normal-section">
    <div class="content">
        <h2>正常滚动区块</h2>
        <p>这段内容是普通滚动，没有特殊背景效果。</p>
    </div>
</div>

<div class="parallax-section" style="background-image: url('image2.jpg');">
    <div class="content">
        <h2>第二个视差区块</h2>
        <p>背景图片依然固定，内容继续流动。</p>
    </div>
</div>

body {
    margin: 0;
    font-family: sans-serif;
    line-height: 1.6;
    color: #333;
}

.parallax-section {
    height: 100vh; /* 或者其他你想要的高度 */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white; /* 确保文字在深色背景上可见 */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 增加文字可读性 */

    /* 核心视差效果 */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; /* 确保背景图片覆盖整个区域 */
}

.normal-section {
    height: 80vh;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}

.content {
    max-width: 800px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* 内容区背景，方便阅读 */
    border-radius: 8px;
    text-align: center;
}

@media (max-width: 768px) {
    .parallax-section {
        background-attachment: scroll; /* 移动端禁用fixed效果 */
        /* 也可以考虑 background-image: none; 或者设置一个纯色背景 */
    }
}

@media (prefers-reduced-motion: reduce) {
    .parallax-section {
        background-attachment: scroll; /* 用户偏好减少动态时，禁用视差 */
    }
}

<div class="parallax-container">
    <div class="parallax-layer layer-back"></div>
    <div class="parallax-layer layer-middle"></div>
    <div class="parallax-layer layer-front"></div>
    <div class="scroll-content">
        <!-- 你的实际滚动内容 -->
        <p>这里是滚动内容，它会覆盖在视差层之上。</p>
        <p>通过CSS transform实现的多层视差效果。</p>
        <!-- 更多内容确保可滚动 -->
    </div>
</div>

.parallax-container {
    height: 100vh;
    overflow-x: hidden; /* 防止横向滚动条 */
    overflow-y: scroll; /* 允许垂直滚动 */
    perspective: 1px; /* 关键：设置透视深度 */
    perspective-origin: 0 0; /* 透视原点，通常是左上角 */
    /* 兼容性处理，可能需要 -webkit-perspective 等 */
}

.parallax-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    /* 确保层级正确，前景在最上面 */
    z-index: -1; /* 确保背景层在内容之下 */
}

.layer-back {
    background-image: url('deep-background.jpg');
    transform: translateZ(-2px) scale(3); /* 离用户远，所以需要放大补偿 */
    /* 计算：scale(1 + (2 / 1)) = 3 */
}

.layer-middle {
    background-image: url('mid-background.jpg');
    transform: translateZ(-1px) scale(2); /* 离用户中等距离，放大补偿 */
    /* 计算：scale(1 + (1 / 1)) = 2 */
}

.layer-front {
    background-image: url('front-background.jpg');
    transform: translateZ(0px) scale(1); /* 保持原位，或者稍微拉近 */
    /* z-index 可以根据需要调整，确保内容在最上层 */
}

.scroll-content {
    position: relative; /* 确保内容在视差层之上 */
    z-index: 1;
    /* 这里的 transform 也要做一些处理，让它在 3D 空间中 */
    transform: translateZ(0); /* 保持在透视平面上 */
    padding-top: 50vh; /* 确保有足够内容滚动 */
    padding-bottom: 50vh;
    background-color: rgba(255, 255, 255, 0.9); /* 内容背景 */
}