css - 仅使用 CSS 的视差：调整前景和背景的滚动速度，使它们同时到达底部

Question

我正处于编码之旅的开始阶段，我需要专门使用 HTML 和 CSS 来处理我当前的项目。任务是创建一个简单的单页网站，display: flex;并flex-direction: column;使用 CSS 进行一些操作。作为一个有足够空闲时间的挑战爱好者，我开始自己为我的单页纸添加视差。我没有遗憾——还没有。

我认为我已经理解了大致的线路，但是我还没有完全掌握它的深层机制。通过调整Red Stapler的这段视频中的代码，我设法构建了某种有效的东西。您可以在 CopePen 上找到我正在进行的工作。我知道这很丑，但我真的想在设计内容之前学习视差（在简单部分之前的困难部分）。

如果您查看我的钢笔，您会看到，我注释掉了原件background-image并用linear-gradient. 我的尺寸background-image是 1280px*960px，但我宁愿以 200vh 的高度显示它。我还考虑过剪裁每一个article以创建视觉平衡并缩短页面（我最初打算使用 200vh 的总高度，因此是background-image.

这是我的问题。如何正确校准视差，使我的前景高度对应于我的背景高度？更具体地说，如何调整滚动速度以使前景和背景同时达到各自的底部？它是否与我对内容的剪辑/取消剪辑部分的想法兼容（这需要滚动速度适应不同的前景高度）？

我觉得这两个属性可以尝试一下，z-index: -1; transform: translateZ(-1px) scale(2);因为视频中的那个人解释说具有不同索引的元素将以不同的速度滚动，但我在过去的几个小时里在各个方向上进行了谷歌搜索，但没有找到答案。或者，也许我读了无数遍，但它只是在我脑海中浮现。

标签： cssscrollparallax