javascript - 动画结束后添加一个小反弹

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

有没有办法在滚动结束后添加一个小反弹或触发一个迷你动画？

标签： javascriptanimationanime.js

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>