滾動文本的水平視差效果

Question

所以我有點讓它工作。 我相信我沒有正確理解 javascript。

我從另一個線程中獲取了這個，但是它的行為並不像我試圖實現的那樣。 我看到變量是一個數學方程，它基於 window 高度的運動。

1. 我怎樣才能操縱方程，以便我可以控制“一些很酷的文本。”的初始 position（如果你注意到加載時它需要正確的 position，然后滾動它會被 JS 移動）留在我想要的地方？

2. 是什么控制了運動的速度和強度，我該如何控制它？

我相信我只是不理解控制所有這些變量的語法，你能指出我正確的方向來閱讀以理解這些特定變量嗎？ 謝謝你。 :D

https://jsfiddle.net/codingcrafter/kv9od1ju/22/

/* 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
    });
  });
});

Answer 1

所以你想將文本從左向右或從右向左移動？

我做了與您的問題類似的事情，但我使用 jQuery 來處理滾動效果。

如果您要使用下面的代碼，您需要使用class將文本包裝在一個元素中

隨着頁面滾動，元素將 append 和 styles 動態地傳遞給元素。

<h1 class="introduction">

WE ARE A <br><span class="d">DIGITAL</span><br>PARTNER

</h1>

$(window).scroll(function() {
    var wScroll = $(this).scrollTop();
    $(".introduction").css({
        transform: "translateX(-" + wScroll / 23 + "%)"
    })
});

演示： https://guide-nancy-64871.netlify.com/當頁面滾動時，header 文本向左移動。

閱讀有關 css 變換的更多信息： https://css-tricks.com/almanac/properties/t/transform/

希望這可以幫助！