已实现背景Parallax视差效果，如何为文本添加独立滚动视差？

没问题！要让.parallsec类的<h1>文本实现独立于背景和页面的视差滚动（比如滚动速度更快），我们可以单独针对文本元素编写视差逻辑，通过调整不同的速度参数来区分它和背景的滚动行为。以下是修改后的完整解决方案：

修改后的代码 #

JavaScript #

$(document).ready(function(){
  // 处理背景视差的元素和速度
  const parallElements = document.querySelectorAll('.parall');
  const bgSpeed = -0.4;
  
  // 处理文本视差的元素和速度（这里设置更快的滚动速度）
  const parallTextElements = document.querySelectorAll('.parallsec');
  const textSpeed = 0.8; // 可调整：正数=同页面滚动方向更快，负数=反方向滚动，绝对值越大速度越快

  window.onscroll = function(){
    // 原有背景视差逻辑
    [].slice.call(parallElements).forEach(function(el){
      const windowYOffset = window.pageYOffset;
      const bgPosition = `50% ${windowYOffset * bgSpeed}px`;
      el.style.backgroundPosition = bgPosition;
    });

    // 新增文本视差逻辑
    [].slice.call(parallTextElements).forEach(function(el){
      const windowYOffset = window.pageYOffset;
      // 使用transform实现平滑偏移，性能优于直接修改top属性
      el.style.transform = `translateY(${windowYOffset * textSpeed}px)`;
    });
  };
});

CSS #

.parall {
  background: url("https://www.tucado.com/images/marketing-solutions-bg.jpg") center top no-repeat;
  height: 275px;
  top: 0px;
  background-attachment: fixed !important;
  position: relative; /* 作为内部元素的定位基准 */
}
.parallsec {
  text-align: center;
  color: white;
  padding-top: 100px;
  font-size: 100px;
  position: relative; /* 确保transform属性生效 */
  margin: 0; /* 移除默认margin避免布局偏移 */
}
body {
  height: 1000px;
  padding: 0;
  margin: 0;
}

HTML #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parall">
  <h1 class="parallsec">TEXT</h1>
</div>

关键说明 #

1. 分离视差逻辑：把背景和文本的视差处理分开，各自设置独立的速度参数，这样就能实现不同的滚动效果。
2. 速度参数调整：
   • bgSpeed = -0.4：背景以慢于页面的速度反向滚动（保留你原有的效果）
   • textSpeed = 0.8：文本以快于页面的速度同向滚动，你可以自由修改这个值：
     • 增大数值（比如1.2）会让文本滚动更快
     • 改为负数（比如-0.8）会让文本反向滚动（页面向下滚时，文本向上移动）
3. 性能优化：使用transform: translateY()调整文本位置，相比修改top属性，transform会触发GPU加速，滚动时更流畅。
4. 定位基准：给.parall添加position: relative，确保内部文本元素的定位行为符合预期。

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