Question

https://www.ateliergymnase.com/

以该站点为例，如果向下滚动至团队成员部分并打开开发控制台，您会注意到，即使停止滚动，仍然会有少量动画继续播放。

相反：https://codepen.io/DaveMoran/full/QBbVmM/使用animejs时，当用户停止滚动动画时，动画会停止，而不是让动画更流畅地停止播放。

动画的JS代码：

jQuery(document).ready(function($) {
  // Window properties
    let wHeight = window.innerHeight;
    let wWidth = window.innerWidth;

    $(window).resize(function () {
        wHeight = window.innerHeight;
        wWidth = window.innerWidth;
    });

  let container = $('#scroll-container');
  let containerYOffset = Math.floor(container.offset().top - wHeight);
  $(window).on('scroll', function() {
    let currentPosition = $(window).scrollTop();
    if(currentPosition >= containerYOffset) {
      container.css('position', 'absolute');
      container.css('bottom', '0');
      container.css('top', 'unset');
    }
    container.css('position', 'fixed');

    let xTranslateAmt = currentPosition - containerYOffset;
    let scroll = anime({
      targets: '#scroll-container',
                translateX: -((xTranslateAmt - wHeight / 5) * 1.1) + 'px',
                easing: 'linear',
                elasticity: 400,
                duration: 0,
    })
  })
})

在滚动结束后，是否可以添加小反弹或触发迷你动画？

Answer 1

我不确定您要的是什么，因为您的问题对我来说不是很清楚。
但是也许您可以仅添加一个transition就可以完成操作。运行以下代码段：

jQuery(document).ready(function($) {
  // Window properties
  let wHeight = window.innerHeight;
  let wWidth = window.innerWidth;

  $(window).resize(function() {
    wHeight = window.innerHeight;
    wWidth = window.innerWidth;
  });

  let container = $('#scroll-container');
  let containerYOffset = Math.floor(container.offset().top - wHeight);
  $(window).on('scroll', function() {
    let currentPosition = $(window).scrollTop();
    if (currentPosition >= containerYOffset) {
      container.css('position', 'absolute');
      container.css('bottom', '0');
      container.css('top', 'unset');
    }
    container.css('position', 'fixed');

    let xTranslateAmt = currentPosition - containerYOffset;
    let scroll = anime({
      targets: '#scroll-container',
      translateX: -((xTranslateAmt - wHeight / 5) * 1.1) + 'px',
      easing: 'linear',
      elasticity: 400,
      duration: 0,
    })
  })
})

body {
  overflow-x: hidden;
}

.above-scroll,
.below-scroll {
  width: 100vw;
  background: #efefef;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

#scroll-content {
  padding: 50px 30px;
  height: calc(2300px + 100vh);
  widtH: 100%;
  position: relative;
  overflow: hidden;
}

#scroll-container {
  display: flex;
  flex-direction: row;
  height: 100vh;
  left: 100vw;
  width: 2300px;
  justify-content: space-between;
  align-items: center;
  position: relative;
  top: 0;
  transition: .5s cubic-bezier(.59, .86, .96, 1.14)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="above-scroll">
  <h2>Above Scroll</h2>
</div>
<div id="scroll-content">
  <div id="scroll-container">
    <img src="https://placehold.it/320x320" />
    <img src="https://placehold.it/320x420" />
    <img src="https://placehold.it/320x480" />
    <img src="https://placehold.it/320x320" />
    <img src="https://placehold.it/320x480" />
    <img src="https://placehold.it/320x200" />
  </div>
</div>
<div class="below-scroll">
  <h2>Below Scroll</h2>
</div>

动画结束后添加小反弹

1 个答案: