我如何使我的标题行为与视差滚动相同

<div class="parallax-container">
  <h1 class="parallax-title">My Title</h1>
</div>

.parallax-container {
  height: 100vh; /* 设置容器的高度，可以根据需要进行调整 */
  overflow: hidden; /* 隐藏容器中超出部分的内容 */
  perspective: 1000px; /* 设置透视视角，用于产生视差效果 */
}

.parallax-title {
  position: absolute; /* 设置标题的定位方式为绝对定位 */
  top: 50%; /* 将标题垂直居中 */
  left: 50%; /* 将标题水平居中 */
  transform: translate(-50%, -50%) translateZ(-100px); /* 使用translate和translateZ属性实现视差效果 */
}

window.addEventListener('scroll', function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop; /* 获取滚动距离 */
  var parallaxTitle = document.querySelector('.parallax-title'); /* 获取标题元素 */

  parallaxTitle.style.transform = 'translate(-50%, ' + (scrollTop * 0.5) + 'px) translateZ(-100px)'; /* 根据滚动距离更新标题的位置 */
});