动画从页面开始向下滚动

Question

i am trying to show the animation when i scroll down the page. 当我向下滚动页面时，我试图显示动画。 When i scroll down the page, then the animation starts and it only animate for only one time. 当我向下滚动页面时，动画将开始并且仅动画一次。 in my code, animation starts on page load but i want it show on page scroll down ie when i reaches to that part of the page. 在我的代码中，动画从页面加载开始，但是我希望它在页面向下滚动时显示，即当我到达页面的该部分时。

Here is my code: 这是我的代码：

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

Please help me out.. 请帮帮我..

Answer 1

You need to call animation function after window scroll not directly page load as you did right now. 您需要在窗口滚动后立即调用动画功能，而不是像现在这样直接加载页面。

For this add a window scroll listener first then achieve animate when div reached to top of view page and use a flag to run animate only one time. 为此，首先添加一个窗口滚动侦听器，然后在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 个解决方案

解决方案1
2 2018-11-26 09:41:08

动画从页面开始向下滚动

问题描述

1 个解决方案

解决方案1 2 2018-11-26 09:41:08

解决方案1
2 2018-11-26 09:41:08