向下滚动时动画元素

【问题标题】：animating elements when you scroll down向下滚动时动画元素
【发布时间】：2021-02-17 19:17:00
【问题描述】：

我正在尝试向仅在向下滚动后才能查看的元素添加动画，我如何确保动画仅在用户向下滚动并可以查看它们之后才发生。最好使用 CSS 而不是 Javascript。

【问题讨论】：

stackoverflow.com/questions/487073/… --> 滚动后如何检查元素是否可见？
AFAIK 没有直接的方法将 CSS 样式设置为页面滚动。这可能与css-tricks.com/styling-based-on-scroll-position 相关
听起来intersectionObserver 在这里会有所帮助，尽管它需要一点（不多）Javascript。如果您提供一些代码来显示您的具体情况，那会有所帮助。

【解决方案1】：

没有 javascipt 就无法做到。

您可以使用 IntersectionObserver 来执行此操作。它主要用于延迟加载，但你需要一小块才能观察你的卷轴。

var sections = document.querySelectorAll('section');

var options = {
  rootMargin: '0px',
  threshold: 0.25
}

var callback = (entries) => {
  entries.forEach((entry) => {
      var target = entry.target;
      console.log(target);
    if (entry.intersectionRatio >= 0.25) {
      target.classList.add("is-inview");
    } else {
      target.classList.remove("is-inview");
    }
  })
}

var observer = new IntersectionObserver(callback, options)
sections.forEach((section, index) => {
  observer.observe(section)
});

你可以看到最小的工作代码here。

【讨论】：