仅在动画后开始滚动答案

【问题标题】：Start scroll only after animation仅在动画后开始滚动
【发布时间】：2021-07-28 16:06:24
【问题描述】：

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

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>

这是我引用的代码，但背景在文本移动时移动。

【问题讨论】：

它看起来不像动画。您想手动滚动文本，当文本完全滚动时，您可以进一步滚动窗口。那么？
我去年做了一个解决方案。这是你想要的吗？ - stackoverflow.com/questions/65446627/…
感谢您的回复。我不想制作单独的水平滚动部分。它只是滚动时从右到左的位移。可能不清楚，但在我提到的示例中，div 在文本移动时滚动，这是我不想要的。我想保持 div 固定，直到文本移动几个像素，然后恢复正常滚动。
是否应该在页面加载后立即开始动画？
不，当到达页面中间某处的部分时。

标签： jquery css animation scroll position

【解决方案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>

【讨论】：

非常感谢！