个人中心
gpt4 book ai didi

javascript - 动画在页面向下滚动时开始

转载 作者：行者123 更新时间：2023-11-30 14:16:38 24 4
gpt4 key购买 nike

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

这是我的代码:

$('#img1').animate({
  width: '900px',
  height: '500px',
  margin: '0'
}, 2000);

$('#img11').animate({
  width: '50%',
  height: '450px',
}, 2000);

$('#img12').animate({
  width: '50%',
  height: '500px',
  margin: '0'
}, 2000);

$('#img2').animate({
  width: '850px',
  height: '450px',
  margin: '100'
}, 2000);

$('#img3').animate({
  width: '400px',
  height: '300px',
  position: 'absolute',
  left: '100px'

}, 2000);
.main-black {
  background-color: black;
  width: 700px;
  height: 2000px;
  margin-left: 350px;
}

#img1 {
  background-color: transparent;
  position: absolute;
  top: 200px;
  left: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 800px;
  height: 400px;
  z-index: 1;
}

#img11 {
  background-color: white;
  float: left;
  width: 50%;
  height: 350px;
  margin-top: 25px;
}

#img12 {
  width: 50%;
  height: 400px;
  float: right;
}

#img2 {
  position: absolute;
  top: 200px;
  left: 200px;
  background-color: #abbd47;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 800px;
  height: 400px;
}

#img3 {
  position: absolute;
  top: 500px;
  left: 200px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 200px;
  z-index: -1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body class="body-about">

  <div class="container-fluid top-banner ">
    <div class="row slyder-top">

      <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel" style="width: 100%;">
        <div class="carousel-inner">

          <div class="carousel-item active">
            <img class="d-block w-100" src="image/banner1.jpg" alt="First slide">


          </div>
        </div>


      </div>


    </div>
  </div>

  <center>
    <p class="h2 text-secondary my-4" id="about">About us</p>
  </center>

  <div class="main-black"></div>

  <div style="position: absolute;top: 800px;">
    <div>
      <div id="img1">

        <div id="img11">
          <h3>First Part</h3>
          <hr>
          <hr>
          <h5>Its the first part</h5>
        </div>

        <div><img id="img12" src="img/food1.jpg"></div>

      </div>

      <div id="img3" style="background-image: url('img/grapes2.png');"></div>

      <div id="img2"></div>
    </div>
  </div>

</body>

请帮帮我..

最佳答案

您需要在窗口滚动后调用动画函数，而不是像现在这样直接加载页面。

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

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);
  }
});

关于javascript - 动画在页面向下滚动时开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53478029/

24 4 0
文章推荐： javascript - React Native - setState 和 setNativeProps 有什么区别？
文章推荐： javascript - NativeScript - viewModel.foo 和 viewModel.get ("foo"之间有什么区别)？
文章推荐： javascript - 我如何使用 reactjs 回调函数
文章推荐： ios - 自定义图像滤镜和多种彩色滤镜
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com