让div以不同的速度向上滚动，但在相同的位置结束

Question

我一直在寻找一种方法来做到这一点，但我运气不佳。我正在使用Scrollify插件创建一个网站。到目前为止，我的一切都很顺利，但我被困在了这一点上。

在我的第三部分中，我有5个div，每个div都有一个不同的背景图像，它会在另一个的顶部显示一个图像，这将是一个很好的效果，但我似乎找不到以不同的速度滚动每个div的方法，但一旦滚动完成，就会在相同的位置结束。

这有点像他们的第三个样本，但这里的一个图像是移动的，而另一个是静态的。有人知道用这个插件或其他方法做这件事的方法吗？感谢

Answer 1

目前还不完全清楚您想要的布局是什么。通常，我们可以使用常见的CSS转换来实现图像的同时移动，该转换由Scrollify before事件的回调触发，可以在配置哈希中进行配置。在下面的演示中，我使用了topCSS属性的转换，将所有图像（更准确地说，它们各自的div容器）从通过静态CSS设置的交错top值设置为top:0。我为每个移动的div分别指定了转换，这使得可以为每个移动div指定不同的速度

var MOVE_INDEX = 1;
$(function() {
  $.scrollify({
    section:'.section',
    scrollSpeed:2500,
    before:function(i,a) {
      if (i===MOVE_INDEX)
        $('.movediv').addClass('movedivactive');
      else if (i===MOVE_INDEX-1 || i===MOVE_INDEX+1)
        $('.movediv').removeClass('movedivactive');
    },
  });
});

.section { border:1px solid black; }
.section1 { border-color:red; }
.section2 { border-color:blue; }
.section3 { border-color:green; }
.movedivcontainer { display:flex; }
.movediv img { width:80px; height:80px; }
.movediv { position:relative; }
.movediv1 { top:80px; transition:top 1s ease 0s; }
.movediv2 { top:160px; transition:top 2s ease 0s; }
.movediv3 { top:240px; transition:top 3s ease 0s; }
.movedivactive { top:0; }

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/scrollify/1.0.4/jquery.scrollify.js"></script>
<div>
  <div class="section section1">
    <h1>Section 1</h1>
  </div>
  <div class="section section2">
    <h1>Section 2</h1>
    <div class="movedivcontainer">
      <div class="movediv movediv1"><img src="https://www.gravatar.com/avatar/4fa45261dec56004145c653832504920?s=328&d=identicon&r=PG&f=1"/></div>
      <div class="movediv movediv2"><img src="https://www.gravatar.com/avatar/66370f35c99fab441bcc18e6cf2b933b?s=328&d=identicon&r=PG&f=1"/></div>
      <div class="movediv movediv3"><img src="https://www.gravatar.com/avatar/f2391d9fbb39b8275de7b5cb307ba32d?s=328&d=identicon&r=PG"/></div>
    </div>
  </div>
  <div class="section section3">
    <h1>Section 3</h1>
  </div>
</div>