仅在动画后开始滚动

Question

我正在尝试制作一个动画，其中文本在滚动时向右移动，但我想保持背景静止，直到文本从初始位置移动到最终位置。

jQuery(document).on('scroll', function(){
jQuery('h1').css("left", Math.max(100 - 0.2*window.scrollY, 1) + "vw");
})

.scrolling-text{
  margin: 0;
  padding: 0;
  height: 100vw;
  overflow-x: hidden;
}
h1{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 100px;
  left: 100vw;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>

这是我引用的代码，但是背景随着文本的移动而移动。

Answer 1

您可以尝试将其与 position: sticky 结合使用。

$(document).on('scroll', function(){
$('h1').css("left", Math.max(100 - 0.2*window.scrollY, 1) + "vw");
});
$('.wrap').css('height',$('h1').outerWidth()*2);

.scrolling-text{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background-color: #4158D0;
}
h1{
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 50px;
  left: 100vw;
  color: #fff;
}

.wrap {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>
</div>
<div style="height:1000px"></div>

仅在动画后开始滚动

Start scroll only after animation

css

jquery

animation

scroll

position