如何创建自然滚动的水平视差？

<div class="parallax-container">
  <div class="background-layer"></div>
  <div class="foreground-layer"></div>
</div>

.parallax-container {
  position: relative;
  overflow: hidden;
  height: 100vh; /* 设置容器高度 */
}

.background-layer,
.foreground-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 设置层级元素宽度 */
  height: 100%; /* 设置层级元素高度 */
}

.background-layer {
  background-image: url('背景图片链接'); /* 设置背景层背景图片 */
  background-size: cover; /* 背景图片填充满整个背景层 */
  transform: translateX(-50%); /* 初始位置向左偏移50% */
}

.foreground-layer {
  /* 添加前景层内容和样式，例如文字、按钮等 */
  transform: translateX(0); /* 初始位置无偏移 */
}

var parallaxContainer = document.querySelector('.parallax-container');
var backgroundLayer = document.querySelector('.background-layer');
var foregroundLayer = document.querySelector('.foreground-layer');

window.addEventListener('scroll', function() {
  var scrollPosition = window.pageYOffset; /* 获取页面滚动距离 */

  // 计算每个层级元素的滚动偏移量
  var backgroundOffset = scrollPosition * 0.5; /* 背景层滚动速度为页面滚动速度的一半 */
  var foregroundOffset = scrollPosition * 1; /* 前景层滚动速度与页面滚动速度相同 */

  // 设置层级元素的偏移量
  backgroundLayer.style.transform = 'translateX(' + (-backgroundOffset) + 'px)';
  foregroundLayer.style.transform = 'translateX(' + (-foregroundOffset) + 'px)';
});