Javascript 滚动条上文本的水平视差效果

所以我让它开始工作了。我相信我没有正确理解javascript

我从另一个线程中获取了这一点，但是它的行为与我试图实现的方式不太一样。我看到这些变量是一个数学方程，它根据窗户的高度移动

我如何操纵这个等式，以便控制“一些很酷的文本”的初始位置（如果你注意到加载时它的位置正确，然后在滚动时它被JS移动）以保持在我想要的位置

是什么控制了运动的速度和强度？我该如何操纵它

我相信我只是不理解控制所有这些变量的语法，你能给我指出正确的方向，让我读一些书来理解这些特定的变量吗？谢谢D

/*自定义水平滚动视差*/
英雄二号{
溢出：隐藏；
位置：相对位置；
最小高度：500px；
}
h1{
-webkit文本笔划宽度：0.1rem；
-webkit文本笔划颜色：黑色；
颜色：#fff；
字体系列：“开放式Sans”，Helvetica，Times New Roman！重要；
字号：900；
}
para ele先生{
位置：绝对位置；
宽度：100%；
字体大小：5rem；
}
#英雄优先{
左：75%；
最高：15%；
}
#英雄二号{
左-32%；
底部：10%；
}
.集装箱{
位置：相对位置；
框大小：边框框；
宽度：100%；
身高：100%；
}
一些很酷的文字。
一些无聊的文本。
$（文档）.ready（函数（）{
var$horizontal=$（“#英雄优先”）；
$（窗口）。滚动（函数（）{
var s=$（this）.scrollTop（），
d=$（文档）.height（），
c=$（this）.height（）；
百分比=（s/（d-c））；
变量位置=（滚动百分比*（$（document.width（）-$horizontal.width（））；
$horizontal.css({
“左”：位置
});
});
});

那么您想将文本从左向右或从右向左移动

我做了一些类似于您的问题，但我使用jQuery处理滚动效果

如果要使用下面的代码，则需要将文本包装在带有类简介的元素中

当页面滚动时，元素将动态地将样式附加到元素中

我们是数字
合作伙伴

$（窗口）。滚动（函数（）{
var wScroll=$（this.scrollTop（）；
$（“.introduction”）.css({
转换：“translateX（-“+wScroll/23+”%）”
})
});

演示： 滚动页面时，页眉文本向左移动

阅读有关css转换的更多信息：

---

希望这有帮助

翻译！我差点忘了它的存在。这很好用。我的目标是让每个元素都像那样运动，我认为这对我来说是一个很好的开始。

/* Custom Horizontal Scrolling Parallax */
.hero-two {
  overflow: hidden;
  position: relative;
  min-height: 500px;
}

h1 {
   -webkit-text-stroke-width: 0.1rem;
   -webkit-text-stroke-color: black;
   color: #fff;
   font-family: 'Open Sans', Helvetica, Times New Roman !important;
   font-weight: 900;
}

.para-ele {
  position: absolute;
  width: 100%;
  font-size: 5rem;
}

#hero-first {
  left: 75%;
  top: 15%;
}

#hero-second {
  left: -32%;
  bottom: 10%;
}

.container {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

<div class="container">
  <div class="hero-two">
    <h1 id="hero-first" class="h1 para-ele">
      Some cool text.
    </h1>
    <h1 id="hero-second" class="h1 para-ele">
      Some boring text.
    </h1>
  </div>
</div>

$(document).ready(function() {
  var $horizontal = $('#hero-first');

  $(window).scroll(function() {
    var s = $(this).scrollTop(),
      d = $(document).height(),
      c = $(this).height();

    scrollPercent = (s / (d - c));

    var position = (scrollPercent * ($(document).width() - $horizontal.width()));

    $horizontal.css({
      'left': position
    });
  });
});