Question

我正在尝试为用户将离开的页面制作动画，因此我使用此代码延迟滚动到下一页，以便动画在更改页面之前工作，问题是用户只需滚动一次并等待动画和页面发生变化，当我继续滚动（使用鼠标滚轮或触摸板）时，动画循环且永不改变，您可以看到我创建的代码笔，不要停止滚动以了解是什么问题。

离开第二页时制作动画是什么，所以当你在第二页向下滚动动画开始时，页面改变了。

现在发生的情况是，当您现在滚动时，动画会一直循环直到停止滚动，这是一种糟糕的用户体验。

  <body>
      <nav id="nav">

      </nav>
      <div id="fullpage">
          <div id="sec-1" class="section">
              <h4 class="ast-presint">ASTALIFT Presint</h4>
              <h1 class="title">White Jelly Aquarvsta</h1>
          </div>
          <div id="sec-2"  class="section">
              <img class="image-1" src="https://lh3.googleusercontent.com/proxy/vxPO4c9WyeUtBlFX0WXRzle0jUXY1yOR-YvO9evFDlWkIC2ikeUHJcQ97Xao4GGtikiAPa0MWrAuufl1ayJRWCW69K0pQLNCOo6BaVajcDJIS1ovyVMzoWaC-H_690Ho6WpGIk2tA5kU4iYhDm-pVkF001RktHHwyzsDMOnxaWC5XkJyUg" alt="">
              <img class="image-2" src="https://lh3.googleusercontent.com/proxy/vxPO4c9WyeUtBlFX0WXRzle0jUXY1yOR-YvO9evFDlWkIC2ikeUHJcQ97Xao4GGtikiAPa0MWrAuufl1ayJRWCW69K0pQLNCOo6BaVajcDJIS1ovyVMzoWaC-H_690Ho6WpGIk2tA5kU4iYhDm-pVkF001RktHHwyzsDMOnxaWC5XkJyUg" alt="">
              <img class="image-3" src="https://lh3.googleusercontent.com/proxy/vxPO4c9WyeUtBlFX0WXRzle0jUXY1yOR-YvO9evFDlWkIC2ikeUHJcQ97Xao4GGtikiAPa0MWrAuufl1ayJRWCW69K0pQLNCOo6BaVajcDJIS1ovyVMzoWaC-H_690Ho6WpGIk2tA5kU4iYhDm-pVkF001RktHHwyzsDMOnxaWC5XkJyUg" alt="">
              <h1 class="title-2">Unveil Your skin's Radiance</h1>
              <h5>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h5>
          </div>
          <div id="sec-1"  class="section">Some section</div>
          <div id="sec-1"  class="section">Some section</div>
      </div> 




  <script>
  var delay = 1000; //milliseconds
  var timeoutId;
  var animationIsFinished = false;



 /* Slide variable */
  var slideIndexBis = 1;
  var sliding = false;

  new fullpage('#fullpage',{
  fadingEffect:true, 
  fadingEffect:'slides',
  onLeave: function(origin, destination, direction){
      const section = origin.index;

      tl = new TimelineMax({delay:0.7});

      if (section === 1){
          var curTime = new Date().getTime();

          //animating my element
          tl.fromTo($('.title-2'),0.8,{scale: 1},{scale: 100, ease:                  Power1.easeIn, opacity:0})
          tl.fromTo($('.image-1'),0.2,{x: 0},{x: "100%", ease: Power1.easeIn})
          tl.fromTo($('.image-2'),0,{x: 0},{x: "100%"})
          tl.fromTo($('.image-3'),0,{y: 0},{y: "100%"})

          clearTimeout(timeoutId);

          timeoutId = setTimeout(function(){
              animationIsFinished = true;

              fullpage_api.moveTo(destination.index + 1);
          }, delay);

          return animationIsFinished;

      }

  },

});

见艾哈迈德·奥巴德 ( PopmYEx) 的钢笔 @amo4oma

完整页面。 js，如何在滚动到nes页面之前在当前页面执行动画

0 个答案: