时间戳

首页 > 解决方案 > 如何延迟动画，直到用户加载元素

html - 如何延迟动画，直到用户加载元素

问题描述

看看这个页面 https://codewithnick.github.io/#about_me

动画在页面加载时加载我想要动画在用户向下滚动到页面的这一部分时加载我如何实现这一点。这是我的代码

@keyframes fill{
  from{
    width: 0%;
  }
  
}

.progress{   
    
    animation: 3s fill ease-out 0.5s;

}

标签： htmlcssanimationcss-selectors

解决方案

您最好的选择是在用户向下滚动时向具有动画的元素添加一个类。

on window scroll {
if (scroll pos > x) {
element.addclass("animatedClass");
  }
}

如果您希望动画仅在用户滚动超过某个点时发生，您需要做的就是更改滚动事件以删除该类，如下所示：

$(window).scroll(function () {
  if($(window).scrollTop() > 0) {
    element.addClass("animatedClass");
  }
  else {
    element.removeClass("animatedClass");
  }
});

推荐阅读