如何在js中双向滚动动画（顶部/底部）

Question

我使用边界客户端在 JS 中创建了一个小动画。一旦我向下滚动直到出现文本/内容，我通过应用 CSS 中的“.active”将其不透明度更改为 1。当我再次向上滚动到元素上方时，不透明度变回 0（因为“.active”被带走了）。

问题是，当我从下方向上滚动到内容元素时，我想让同样的事情发生。一旦用户低于内容元素，不透明度应该变为 0，然后当他们向上滚动时（因此内容元素再次出现在视图中），不透明度应该变为 1。所以它使动画在两个方向上工作，就像在scrollrevealjs的首页。

document.addEventListener('scroll',()=>{
  let content = document.querySelector('.text');
  let contentPositiontop = content.getBoundingClientRect().top;
  let screenPosition = window.innerHeight ;
  if (contentPositiontop < screenPosition){   
    content.classList.add('active');                                                                
  }
  else{
    content.classList.remove('active');
  }
});

.text{
  transform: translateX(700px) translateY(1000px);
  font-family: Inter;
  font-weight: 800;
  font-size: 40px;
  opacity: 0;
  transition: all 2s ease;
  position: absolute;
}

.active{
  opacity: 1;
}

Answer 1

您只需要检查内容元素底部和顶部的高度即可。

（对于顶部，我们需要添加屏幕高度（window.innerHeight），因为我们将其位置与屏幕底部进行比较。底部不需要这个，因为我们将其位置与屏幕顶部，垂直位置为 0。）

当底部和顶部都在范围内时，我们显示内容元素。

（如果内容元素的高度由于某种原因大于屏幕高度，则必须在 0 和 window.innerHeight 之间选择值来触发过渡。）

document.addEventListener('scroll',() => {
  const
    content = document.querySelector('.text'),
    top = content.getBoundingClientRect().top,
    bottom = content.getBoundingClientRect().bottom;
  if (top < innerHeight && bottom > 0){
    content.classList.add('active');
  }
  else{
    content.classList.remove('active');
  }
});

  .spacer{ height: 104vh; }
  .text{ height: 100vh; background: blue; transform: translateX(20px); opacity: 0; transition: all 2s ease; }
  .active{ opacity: 1; }

<div class="spacer"> </div>
<div class="text"></div>
<div class="spacer"> </div>
.