使动画等到到达部分页面答案

【问题标题】：Make animation wait until reach section page使动画等到到达部分页面
【发布时间】：2020-03-28 21:54:59
【问题描述】：

我一直在尝试让动画在用户到达页面的特定部分时立即开始。但实际情况是，动画在页面加载后立即开始，使其在用户到达该部分之前完成。谁能给我一个例子，请问我该怎么做？

【问题讨论】：

这可能对stackoverflow.com/questions/27404535/…有帮助

【解决方案1】：

使用 CSS 延迟属性使动画休眠一段给定的时间

div class="" {
  animation-delay: 3s;
}

编辑：我相信这个问题已经回答here

【讨论】：

【解决方案2】：

您可以使用原生窗口滚动事件，等到滚动位置到达section位置，然后通过添加动画的css类来启动动画。

您可以像这样在窗口滚动上添加回调：

var scroll_position = 0;
var section_position = 1000;

function startAnimation() {
   // Set the class with the animation to the element
   element.classList.add("run-animation");
}

window.addEventListener('scroll', function(e) {
  scroll_position = window.scrollY;
  if (scroll_position > section_position) {
    // Start the animation -> startAnimation()
  }
});

使用 Angular 或 JQuery 等框架更容易做到这一点。这里有一些关于window scroll event 的信息。还有here 如何从 javascript 控制动画。

【讨论】：