Javascript 动画从页面开始向下滚动

我试图在向下滚动页面时显示动画。当我向下滚动页面时，动画开始，它只会动画一次。 在我的代码中，动画从页面加载开始，但我希望它在页面向下滚动时显示，即当我到达页面的该部分时

这是我的密码：

$（'img1'）。设置动画({
宽度：“900px”，
高度：“500px”，
边距：“0”
}, 2000);
$（'#img11'）。设置动画({
宽度：“50%”，
高度：'450px'，
}, 2000);
$（'#img12'）。设置动画({
宽度：“50%”，
高度：“500px”，
边距：“0”
}, 2000);
$（'#img2'）。设置动画({
宽度：“850px”，
高度：'450px'，
保证金：“100”
}, 2000);
$（'#img3'）。设置动画({
宽度：“400px”，
高度：“300px”，
位置：'绝对'，
左：“100px”
}, 2000);
.main黑色{
背景色：黑色；
宽度：700px；
高度：2000px；
左边距：350px；
}
#img1{
背景色：透明；
位置：绝对位置；
顶部：200px；
左：200px；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
宽度：800px；
高度：400px；
z指数：1；
}
#img11{
背景色：白色；
浮动：左；
宽度：50%；
高度：350px；
边缘顶部：25px；
}
#img12{
宽度：50%；
高度：400px；
浮动：对；
}
#img2{
位置：绝对位置；
顶部：200px；
左：200px；
背景色：#abbd47；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
宽度：800px；
高度：400px；
}
#img3{
位置：绝对位置；
顶部：500px；
左：200px；
背景重复：无重复；
背景位置：中心；
背景尺寸：封面；
宽度：300px；
高度：200px；
z指数：-1；
}

关于我们

第一部分


这是第一部分
您需要在窗口滚动后调用动画功能，而不是像现在那样直接加载页面

为此，首先添加一个窗口滚动监听器，然后在div到达视图页面顶部时实现动画，并使用一个标志只运行一次动画

var distance = $('#img1').offset().top, imageScrolled = false;
$(window).scroll(function() {
  // $window.scrollTop() >= distance ==> Div reached to top of page
  // imageScrolled ==> Flag to run it once
  if ( $window.scrollTop() >= distance && !imageScrolled) {
    imageScrolled = true;
    $('#img1').animate({
      width:'900px',
      height:'100px',
      margin: '0'
    }, 2000);
  }
});

你是说在加载时设置动画。你必须计算距离，听onscroll，然后确定哪一个要设置动画。