如您所知,后台附件不适用于移动设备。对于桌面,我使用它,但对于 Android 和 IOS,我不知道应该如何创建视差效果。
我考虑过position:fixed,但是overflow:hidden也根本不起作用,因为对象会附加到视口。
我之前也尝试过使用 background-position-y 通过 JS 来实现,它的值是 window.scrollY,尽管它也很滞后(定位有延迟,有时背景会晃动)。
JS:
function parallax() {
document.body.style = `--check: ${window.scrollY}px`;
requestAnimationFrame(parallax)
}
requestAnimationFrame(parallax);
CSS:
background-position-y: var(--check);
我不知道该怎么办。请你帮助我好吗? 预先感谢您!
由于移动浏览器处理滚动和渲染的方式,在移动设备上创建视差效果可能有点棘手。然而,我根据我的要求使用了一些策略来达到类似的效果。另请注意,由于移动设备处理 CSS 转换和滚动的方式,以下方法可能无法在所有移动设备上完美运行。如果您的目标设备范围广泛,您可能需要结合使用不同的技术才能获得最佳结果。
方法一:
该方法是使用 JavaScript 在用户滚动时调整背景图像的位置。然而,这种方法可能会消耗大量性能,并且可能会导致移动设备上的滚动出现一些滞后。
方法2
此方法将 CSS 视为中心,即使用 transform 属性 以与其余内容不同的速度移动背景图像。这种方法比使用 JavaScript 更有效,但它可能无法在所有移动设备上完美运行(不过值得一试)。
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
<div class="parallax">
<!-- BEM methodology for classnames -->
<div class="parallax__layer parallax__layer--back">
<!-- Your BG image -->
</div>
<div class="parallax__layer parallax__layer--base">
<!-- Your content -->
</div>
</div>