div以不同的速度向上滚动但在同一个地方结束[关闭]

Question

I been scouring around a way to do this but I haven't had any luck. I am creating a site using Scrollify plugin. I have everything working great so far but I am stuck at this point.

For the my third section I have 5 divs, each with a different background image that will end up one of top of the other to display an image, which it will be a great effect but I can't seem to find a way to scroll each div at a different speed but ending up at the same location once the scroll is done.

It is a little like their third sample but here one image is moving while the other ones are static. Does anyone know a way to do this with this plugin or a different approach? Thanks

Answer 1

It's not entirely clear what your desired layout is. In general, we can achieve a simultaneous movement of images using a common CSS transition, triggered from a callback on the Scrollify before event, which is configurable in the configuration hash. In the below demo I use a transition on the top CSS property, setting all images (more precisely, their individual div containers) to top:0 from staggered top values that are set via the static CSS. I specified the transition separately for each moving div, which makes it possible to specify different speeds for each moving 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>

</div>