主页 / 问题 / 793484
Accepted
Sevastopol'
Asked:2020-03-05 00:18:30 +0000 UTC2020-03-05 00:18:30 +0000 UTC

网站视差效果

  • 772

我怎样才能制作像这里http://ljudi_kryma.tass.ru/这样的视差效果？

.cover {
  height: 100%;
  height: 100vh;
  min-height: 700px;
  background: chocolate;
}

.container {
  height: 2000px;
  background: gray;
}
<div class="cover">обложка</div>
<div class="container">текст</div>

javascript

2 个回答

  1. Best Answer

    我不知道同事们在哪里看到视差，但这里有一个解决方案的草图。

    简要本质：有一个固定位置的盖子，它位于一切之上。

    有一个包含我们内容的容器，最初位于同一位置。在滚动事件中，我们将滚动量一直带到页面边框。

    容器顶部有一个调光器，具有相同的尺寸，一个普通的黑色层，根据位置，我们将其透明度收起来，沿着画布平行于容器移动它。

    有一个提示元素，它有一个容器的大小，在封面之后有一个固定的位置。它位于一切之下，需要模拟更大的页面大小，以便滚动条的大小不会跳跃。

    这里的主要问题是如何使容器在需要时向上滚动而不是向上拖动。在这里检查 scrollTop 有帮助，如果页面滚动超过屏幕大小，则不会传输元素。

    var win_height = $(window).height();
var height = $('#container').height();
$('#hint, #hider').height(height);

var start_pos = height < win_height ? win_height - height : 0;
var saved_pos = $(document).scrollTop();
var container = $('#container');
var container_top;
var scroll_amount;
container.css({
  'top': start_pos + 'px'
});
$('#hider').css({
  'top': start_pos + 'px'
});
$(document).on('scroll', function() {
  current_pos = $(document).scrollTop();
  scroll_amount = current_pos - saved_pos;
  container_top = container.position().top;
  saved_pos = current_pos;
  if ((current_pos <= win_height + scroll_amount) || (container_top < win_height)) {
    var new_top = container_top + scroll_amount;
    if (new_top > win_height) new_top = win_height;
    else if (new_top < start_pos) new_top = start_pos;
    container.css({
      'top': new_top + 'px'
    });
    $('#hider').css({
      'top': new_top + 'px',
      'opacity': (height >= win_height) ? ((win_height - saved_pos) / win_height) :
        ((win_height - container_top) / height)
    });
  }
});
    #cover {
  top: 0px;
  background: chocolate;
  z-index: 4;
  height: 100vh;
}

#container {
  background: green;
  z-index: 2;
}

#hider {
  opacity: 1.0;
  background: black;
  z-index: 3;
  pointer-events: none;
}

#hint {
  z-index: 1;
  top: 100vh;
}

.sized {
  position: absolute;
  width: 100%;
}

body {
  overflow-x: hidden;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sized" id="cover">обложка</div>
<div class="sized" id="container"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span></div>
<div class="sized" id="hider"></div>
<div class="sized" id="hint"></div>

    • 23

  2. 最简单的解决方案，恕我直言：container设置margin-top> 50vh，当滚动页面时，我们将固定cover值向上移动一个 double 值window.pageYOffset（通过 style top）。
    因此，封面将在视口上方以两倍于滚动的速度“爬行”。而当封面完全隐藏时，content顶部的缩进 'a 将等于其margin-top负 50vh。
    有一个明显的细微差别——当封面可见时，内容会在滚动时移动。在移动设备上查看时，这会产生一些视差效果（在问题链接的示例中，没有）。
    上述选项的演示。

    upd：刚才我看电脑——不像手机浏览器，这一切看起来很丑，因为滚动速度较高，缺乏流畅性。container唯一的选择是通过抵消自身top，但这不适用于移动浏览器（事实证明，一种方式在移动浏览器上看起来不错，另一种在桌面浏览器上看起来不错，但没有通用选项......）。
    带切换的演示content.style.top（不适用于移动浏览器，文本会抽搐）。

    ps：我的版本与上一个答案中指出的版本没有根本的不同——首先，我想解释一下这种实现的逻辑。

    • 4

相关问题