有一些单页应用程序,用户可以在其中进行垂直滚动——但页面看起来暂停并水平滚动——然后清除一个部分。

  • https://color-of-the-year.com/
  • https://highline.huffingtonpost.com/articles/en/poor-millennials/
  • https://ascc.bornfight.com/
  • https://kubrick.life/clockwork11/

  • 我不确定他们是如何做到这一点的——我已经看到应用了变换样式,但不确定如果用户正常滚动,自然存在的元素会发生什么。

    我添加了 jquery 任性函数来检测何时显示嵌套扩展。

    类似这样的东西:

    javascript - 自定义滚动动画 - 水平暂停部分和滚动元素-LMLPHP

    这是 HTML 片段。幻灯片 1 是一个完整的页面元素,幻灯片 5 和 6 也是如此。它们可以是菜单的 anchor 。我有兴趣在此处创建的行为 - 当用户接近嵌套单元时 - 它锁定在幻灯片 2 的顶部,然后转换幻灯片 3 和 4。

    $win.on('scroll', function() {
      var top = $win.scrollTop() / 3;
      console.log("top", top);
      $nested.css('transform', 'translate(' + -top + 'px, 0)');
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="section">slide 1</div>
    <div class="nested">
      <div class="section first">slide 2</div>
      <div class="section second">slide 3</div>
      <div class="section third">slide 4</div>
    </div>
    <div class="section">slide 5</div>
    <div class="section">slide 6</div>


    JSFiddle Example

    最佳答案

    这只是为了让您了解如何实现它。你需要一个占位符容器
    当您的幻灯片成为固定元素时,它会保留垂直空间。

    下面的代码可以处理同一个页面中的多张幻灯片,也可以实现
    一旦你有了想法,你自己的。

    $('.nested').each(function() {
      let $window = $(window), $body = $('body');
      let $nested = $(this), $nestedPlaceholder = $nested.parent();
      let verticalScrollRange, upperMargin, lowerMargin;
      $window.resize(function(){
        $nested.removeClass("sticky").css({left: 0});
        let placeholderHeight = $nestedPlaceholder.css({height: ''}).height();
        verticalScrollRange = placeholderHeight - $window.height();
        upperMargin = $nestedPlaceholder.offset().top;
        lowerMargin = upperMargin + verticalScrollRange;
        $nestedPlaceholder.height(placeholderHeight);
      });
      $window.scroll(function() {
        let scrollTop = $window.scrollTop();
        if (scrollTop > upperMargin && scrollTop < lowerMargin) {
          $nested.addClass("sticky");
          let horizontalScrollRange = $nested.width() - $body.width();
          let verticalScrollPosition = scrollTop - upperMargin;
          let horizontalScrollPosition = verticalScrollPosition / verticalScrollRange * horizontalScrollRange;
          $nested.css({left: -horizontalScrollPosition});
        } else {
          $nested.removeClass("sticky");
        }
      });
      $window.resize();
    });
    body {
      background: linear-gradient(to bottom, #ffcb77 0%, #deaaff 100%);
    }
    
    .section {
      height: 100vh;
      font-size: 5em;
      text-align: center;
      position: relative;
      border: 1px solid red;
    }
    
    .nested .section {
      width: 100vw;
    }
    
    .nested-placeholder {
      overflow: hidden;
    }
    
    .sticky {
      position: fixed;
      z-index: 1;
      top: 0;
      height: 100vh;
      white-space: nowrap;
    }
    
    .sticky .section {
      display: inline-block;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div class="section">Start scrolling down!</div>
    <div class="section">slide 1</div>
    <div class="nested-placeholder">
      <div class="nested">
        <div class="section first">slide 2</div>
        <div class="section second">slide 3</div>
        <div class="section third">slide 4</div>
      </div>
    </div>
    <div class="section">slide 5</div>
    <div class="section">slide 6</div>

    关于javascript - 自定义滚动动画 - 水平暂停部分和滚动元素,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56713668/

    10-11 13:53
    查看更多