基于原生CSS实现三层Footer视差滚动效果

我希望仅使用原生CSS实现一个三层Footer的视差滚动效果：前景为树木、中间层为山脉、背景为太阳，要求页面上下滚动时各层以不同速度移动。尝试过多种视差教程，但未找到针对Footer场景的实现方法。

实现代码 #

HTML结构 #

<section>
  <p>Page content</p>
</section>
<footer>
  <div id="hills"></div>
  <div id="trees"></div>
</footer>

CSS代码 #

section {
  height : 100vh;
}

footer {
    background-color: #57cc99;
    padding: 1em .5em;
    width: 100%;
    position: relative;
    margin-top: 25vw;
}

footer::after{
    content: '';
    position: absolute;
    z-index: -2;
    height: 100px;
    width: 100px;
    top: -25vw;
    right: 25%;
    border-radius: 50%;
    background-color: #fac301;
}

footer #trees, footer #hills{
    position: absolute;
    height: 830px;
    width: 100%;
    left: 0;
    background-size: cover;
}
footer #hills{
    bottom: 0%;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2001.1 829.07'%3E%3Cg id='svg-hills' data-name='hills'%3E%3Cpath fill='%23f0e9de' d='M1874.1,119.74c-88.17,87.92-133.32,152.86-240,200-47.49,21-88,26.61-125.33,32-94.85,13.69-170.67,1.59-259.6-12.62a1398.38,1398.38,0,0,1-140.4-30.05c-73.58-19.69-95.58-31.92-146.11-47.55C937.47,253.74,823,219.7,675.44,223.74c-57,1.56-124.78,3.42-207.93,30.57-111.09,36.28-132.74,79.54-260.07,110.76-71.57,17.55-120,22.67-120,22.67C52.74,391.41,23.63,392,0,392.57v436.5H2001.1V0C1954.63,39.44,1908.24,85.7,1874.1,119.74Z'/%3E%3C/g%3E%3C/svg%3E") bottom center no-repeat;
}

footer #trees{
    bottom: 99%;
    z-index: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 465.59'%3E%3Cg id='Calque_1-2' data-name='Calque 1'%3E%3Cpolygon fill='%2357cc99' points='1989.28 0 1979.43 26.47 1989.45 25.66 1973.18 43.23 1937.26 139.71 1922.64 100.47 1909.69 96.99 1918.19 88.5 1910.55 67.98 1883.13 141.62 1902.08 141.06 1872.22 170.91 1858 209.11 1722.93 270.17 1708.6 206.54 1681.92 197.08 1702.48 179.36 1687.81 114.21 1658.27 245.41 1633.21 175.1 1607.17 248.17 1587.71 144.28 1574.17 116.59 1583.36 121.09 1574.17 72.04 1542.19 242.75 1571.82 221.59 1529.46 310.67 1519.85 361.96 1423.08 405.71 1411.23 351.68 1401.77 348.54 1409.11 342.01 1403.13 314.7 1387.42 386.39 1395.44 391.81 1385.13 396.83 1378.8 425.72 1304.42 459.34 1050.11 402.97 1040.16 365.79 1009.3 325.25 1030.02 327.9 999.26 212.91 990.55 245.46 1000.06 254.97 987.07 258.45 954.1 381.69 889.92 367.46 875.28 312.74 840.58 279.32 867.25 282.73 836.79 168.85 824.63 164.85 833.58 156.86 825.03 124.92 801.95 211.21 825.51 225.89 796.96 229.85 768.8 335.11 760.71 304.84 740.35 290.8 755.08 283.8 736.11 212.91 723.63 259.57 733.48 257.84 721.14 268.88 705.69 326.62 507.9 282.78 494.67 233.34 459.45 191.27 484.6 195.67 454.85 84.5 427.91 185.2 410.96 136.1 381 222.9 354.64 124.38 324.61 118.57 346.38 93.48 331.15 36.55 297.73 161.47 324.69 147.96 285.78 206.11 278.85 232.01 248.02 225.17 245.65 216.32 220.99 181.67 237.92 187.4 224.4 136.88 214.08 119.04 220.65 122.84 213.81 97.3 197.86 156.94 208.98 152.22 193.58 172.94 183.43 210.85 40.37 179.14 21.55 109.28 3.5 104.43 16.69 91.25 0 29.32 0 170.19 0 260.52 0 465.59 1290.59 465.59 1332.61 465.59 2000 465.59 2000 357.83 2000 308.2 2000 289.84 2000 144.92 2000 28.78 1989.28 0'/%3E%3C/g%3E%3C/svg%3E") bottom center no-repeat;
}

视差实现原理 #

1. 布局延伸：给footer设置margin-top: 25vw，让Footer的视觉元素（山脉、树木、太阳）向上延伸到页面内容区下方，滚动时自然衔接内容区与Footer。
2. 层级划分：通过z-index定义三层元素的堆叠顺序：太阳（最底层，z-index: -2）→ 山脉（中间层，z-index: -1）→ 树木（前景层，z-index: 0），Footer背景在最上层。
3. 速度差异：滚动时，不同定位的元素相对于视口的移动距离不同，形成视差效果：前景树木移动最快，中间山脉次之，背景太阳最慢。

内容的提问来源于stack exchange，提问作者SuperOuf