Question

许多聪明的人找到了实现a parallax effect in pure CSS3的方法。大多数这些技术的核心是在容器元素上设置透视和overflow-y：

.parallax {
    perspective: 1px;
    overflow-x: hidden;
    overflow-y: auto;
}

然后是最顶层的元素设置：

.top {
    transform: translateZ(0);
}

在底部元素设置：

.bottom {
    transform: translateZ(-1px) scale(2);
}

如果更负面的translateZ表示滚动速度较慢而scale表示perspective + -1 * translateZ。

这很有效，但令人惊讶的是，实现以下效果证明是困难的。

给出两个内容块，一个背景和一个前景，宽度各不相同（背景的高度＆gt;前景的高度，前景的高度＆gt;背景的高度，甚至背景的高度都有可能） =前景的高度），使用transform创建视差效果，其中包含以下内容：

主要内容（前景）正常滚动（就像它是常规内容一样）。换句话说，页面滚动与滚动内容直接相关。
滚动时，背景内容会滚动得恰当（更快，更慢或与前景相同），以便在达到前景内容的底部时，背景内容也完全滚动到底部。 / LI>
我已确定以下内容：
- translateZ和scale属性取决于前景高度与背景高度的比率和/或文档的高度（因为这个javascript是进行这些计算所必需的，但我会不仅仅是将所有内容外包给javascript并附加onscroll，因为浏览器可以更有效地完成它。）
- 要使前景内容正常滚动，背景必须在translateZ和0px之间1px。
- 为了保持正确比例的背景，Abs(translateZ) + scale = 1。
为了简化问题，当背景高度是前景高度的两倍时，我选择首先解决这个问题。逻辑上，translateZ(0.5px) scale(0.5)应该可以工作，但是当页面滚动到底部时，它无法排列背景和前景。

我还做了一些尝试，试图找出一个线性函数来预测这些给定文档，前景和背景高度的正确值，但我找不到一个能产生正确数字的函数，但是x = 0的情况（我通过操纵Dev Tools中的值手动确定的情况）。

您可以看到the results of my trials。浅灰色是前景。深灰色是背景。平行线用于确保变换不会扭曲背景的缩放。红色轮廓标记每个内容块的顶部和底部。为了满足上述要求，当完全滚动时，背景底部的红线和前景必须是视口底部可见的最后一个像素（现在不是这种情况）。

我也咨询了W3C Spec on CSS Transforms，但数学定义并没有导致translateZ和滚动速度之间的明显映射。

所有这一切：有一个函数，给定文档，背景，前景的高度，它返回适当的translateZ和scale，以便上面的点保持？

CSS仅内容长度相关视差

0 个答案: