Question

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

这是我的代码：

$('#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>

请帮帮我。.

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

动画从页面开始向下滚动

1 个答案: