jquery通过滚动控制动画

Question

我想通过滚动来控制动画， 这意味着一旦滚动达到一定数量，它就会完成动画 这意味着我不能通过暂停滚动动作来暂停动画 这是一个单一的触发器，其中先前的更改只是带有延迟的动画 我想逐渐改变与滚动页面高度百分比相对应的形状 如果页面向下滚动了 10%。正方形应该比圆形多 10% 等等 但它需要使用单个代码块发生，而不是设置多个触发器 顺滑而不突兀

我已经尝试过了，但这一切都是同时发生的。我需要用滚动来控制它。

var canSee = true;

$(window).scroll(function() {
  if ($(this).scrollTop() > 60 && canSee) {
    $("#square").animate({ 
      'height': '50px',
      'width': '50px',
      'background-color':'#555',
      'border-radius': '50%'
    });
    canSee = false;
  } else if ($(this).scrollTop() <= 60 && !canSee) {
    $("#square").animate({ 
      'border-radius': '0%'
    });
    canSee = true;
  }
});

<style>
  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .parent{
    background-color: #ccc;
    height: 130vh;
    padding: 20% 50%;
  }

  #square {
    height: 50px;
    width: 50px;
    background-color: #555;
  }
</style>

<div class="parent">
  <div id="square"></div>
</div>

我希望通过滚动来控制这个布局

Answer 1

你应该看看Intersection Observer (IO)，这是为了解决像你这样的问题而开发的

基本上：您不会监听滚动事件并计算元素的位置，您只需观察一个（或多个）元素并在它们变得可见、完全可见或离开页面时对它们做出反应。

首先，您必须为观察者指定选项：

let options = {
  rootMargin: '0px',
  threshold: .2
}

let observer = new IntersectionObserver(callback, options);

这里我们说一旦一个元素有 20% 可见，我们就会触发我们的回调函数。显然根据您的需要调整这些选项。

然后您指定要观看的元素：

let target = document.querySelectorAll('.elements');
observer.observe(target);

最后你在回调函数中指定应该发生的事情：

让回调=（条目，观察者）=> { entry.forEach(entry => { // 每个条目描述一个观察到的交叉点变化 // 目标元素： }); };

您甚至可以使用official polyfill from w3c 来支持旧版浏览器。

还要检查这个例子，页面上square changes depending on how much is visible的颜色。

如果您不再需要 IO，您也可以call unobserve 停止对元素的观察。