Question

我一直在寻找一种方法，但我没有运气。我正在使用Scrollify插件创建网站。到目前为止，我的一切工作都很顺利，但我现在陷入困境。

对于我的第三部分，我有5个div，每个都有一个不同的背景图像，最终会显示一个图像的顶部，这将是一个很好的效果，但我似乎无法找到一种方法以不同的速度滚动每个div，但滚动完成后最终会在同一位置滚动。

有点像他们的third sample，但是这里有一张图像在移动，而其他图像是静止的。有没有人知道用这个插件或不同方法做到这一点的方法？感谢

Answer 1

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

＆＃13;

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

＆＃13;

.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; }

＆＃13;

<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>

＆＃13;

让div以不同的速度向上滚动但在同一个地方结束

1 个答案: