开始滚动动画，它到达该部分

Posted 2023-05-08

【中文标题】开始滚动动画，它到达该部分

【英文标题】：Starting scroll animation which it reaches the section

【发布时间】：2021-07-30 14:13:50

【问题描述】：

在下面的代码中，移动文本的动画在您到达“换行”部分时结束。我希望仅在换行部分开始时才开始动画并计算 scrollY。如果删除第一个 div，由于上述原因，动画可以正常工作。

$(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: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg) center/cover;

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 style="height:1000px"></div>    
<div class="wrap">
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>
</div>
<div style="height:1000px"></div>

编辑：尝试给定的解决方案

 const sectionToAnimate= document.querySelector('.wrap');
 const observer = new IntersectionObserver(entry => 
        if (entry.intersectionRatio > 0) 
          console.log('in the view');
          $('h1').css("left", Math.max(100 - 0.2*window.scrollY, 1) + "vw");// your animation code
          observer.unobserve(entry.target); // to trigger animation only once
         else 
          console.log('out of view');
        
    );
    
    observer.observe(sectionToAnimate);

.scrolling-text
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg) center/cover;

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 style="height:1000px"></div>    
<div class="wrap">
<div class="scrolling-text">
  <h1>Moving Text on Scroll</h1>
</div>
</div>
<div style="height:1000px"></div>

【问题讨论】：

请注意，如果 .wrap 的位置发生更改（即其上方的 div 更改了它的高度），您的文本位置公式将不起作用

是的，我同意。你有解决方案让它发挥作用吗？

看看***.com/questions/67463352/…

我非常感激。非常感谢:)

@MisterJojo 在幻灯片中让这些进度条围绕圆形图像有多难？

【参考方案1】：

您可以考虑.wrap 的offset().top 并执行以下操作：

$(document).on("scroll", function () 
  const topOffset = $(".wrap").offset().top;
  const scrollTop = window.scrollY;
  const rightValue = Math.max(100 - 0.2 * (topOffset - scrollTop), 1);

  if (rightValue < 100) 
    $("h1").css("right", rightValue + "vw");
  
);

.scrolling-text 
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: sticky;
  background: red;
  top: 50%;
  transform: translateY(-50%);
  height: 100vh;
  background: url(https://cdn.pixabay.com/photo/2020/07/06/01/33/sky-5375005_1280.jpg)
    center/cover;

h1 
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 50px;
  right: 0;
  color: #fff;


.wrap 
  position: relative;

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

【讨论】：

非常感谢！

我很高兴它有帮助