duanpacan2583 2016-08-02 17:55
浏览 51
已采纳

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

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

  • 写回答

1条回答 默认 最新

  • doukai1226 2016-08-02 20:00
    关注

    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>
    

    展开全部

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部