滚动时移动重叠的滑动垂直图像

Question

基本上，我想了解垂直滚动的效果，但在令人惊叹的 Beolit 15 上重叠图像是如何工作的。

到目前为止，我发现他们使用了一个容器 div，其中又包含四个 div，绝对位于容器的左上角。到目前为止，一切都很好。除此之外，四个 div 都具有相同的大小，具有大小为 cover 的背景图像，并且具有不同的 z-index 值以确保它们在顺序正确。

然后，他们添加的是 clip 样式，始终从四个 div 中的每一个的左上角开始，始终具有相同的宽度，但它们的垂直方向不同长度。最上面的是最短的，第二大的是第二短的，依此类推...

到目前为止，我已经有两个问题：

他们如何获得 673px 宽度？这不是取决于屏幕分辨率吗？为什么就是这个值？
他们是如何获得裁剪矩形的教学高度的？为什么这些值？（当然，因为否则它不会工作，但他们是如何获得这些值的？我确定不是通过反复试验......）

现在，除此之外，您可以看到当您滚动时，基本上它们所做的只是更新裁剪矩形的下边框。这样看起来就好像它们向上滑动并移动到图像上方，同时它们保持不动。

我不知道他们是怎么做到的。显然他们 以某种方式 附加到 window.scroll 事件，但究竟是如何附加的？

Answer 1

他们在 .fixed class 到达视口的顶部边缘后通过 e.startEngine() 添加 .fixed class 到 div.images 并在您通过 e.stopEngine() 删除它滚动浏览所有图像。这会触发以下样式：

.focus .images.fixed {
    position: fixed;
    width: calc(50% - 30px);
}

calc(50% - 30px) 可能是您正在搜索的 673px。

每张图片的风格如下：

height: 928px;
clip: rect(0px 597px 1856px 0px);

可以展开为：

height: [window.innerHeight];
clip: rect(
    0px
    [window.innerWidth / 2 - 30]
    [
        this.parentNode.parentNode.offsetTop +
        document.querySelector('.inpagenav').offsetHeight +
        (window.innerHeight * IMAGENUMBER) - 
        window.scrollY
    ]
    0px
);

滚动事件通过 e.Tools.bindEvent(window, "scroll", w) 附加，函数 w 调用 e.Tools.clipY() 为每个图像设置 clip 样式。

滚动时移动重叠的滑动垂直图像

Moving overlapping sliding vertical images when scrolling

css

scroll

image

slide