2

可能完全是错误的树，但是您可以使用 div background-image 元素制作视差滚动图像吗？

我想要发生的是我目前有一些带有文本效果翻转图像的 DIV，但是我在背景图像中使用视差时，我想保留所有站点图像的 3D 主题。

编辑：例如，是否可以在此页面上制作蓝色框：

www.parkhallmanor.co.uk/new

使用视差效果滚动单独的图像？

4

1 回答 1

14

是的，这是可能的。

正如您大概知道的那样，正常的视差效果只是将 bg 图像放在主体标签上，然后在滚动时更改其背景偏移量，或者在其上移动一些 div 比滚动速度慢。

由于您希望每个窗口中都有单独的图像，因此您需要使用背景偏移方法。每个 div 在 CSS 中都是这样的：

#div1 {
    background: url('/ui/div1bg.jpg') 0 -800px no-repeat;
}

是背景0 -800px位置。随着窗口向下滚动，您希望通过逐渐增加第二个值来向下移动背景，以模拟透视。在模拟的视角中，远处的东西慢慢地从你身边经过，靠近的东西移动得很快。

所以你只是得到滚动事件：

$(window).scroll(function () {
    parallax();
});

收集您将使用的指标：

function parallax() {
    var ev = {
        scrollTop: document.body.scrollTop || document.documentElement.scrollTop
    };
    ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
    render(ev);
}

并渲染更改：

function render(ev) {
    var t = ev.scrollTop;
    var y = Math.round(t * 2/3) - 800;
    $('#div1, #div2, #div3').css('background-position', '0 ' + y + 'px');
}

因此，随着 t 变量的增加（用户向下滚动），图像以 2/3 的速率移动。它从 -800px 开始，一旦用户向下滚动到 1200px，就会逐渐变为 0。如果页面长于 1200 像素并且元素仍然可见，则必须调整数学运算，因为此后代码将滚动到图像顶部。但是，如果到那时它们已经超过了该元素，则可以忽略它。

显然，您应该调整那里的数字以获得正确的 div 和图像效果。

如果你想以总页面高度为基础，无论它碰巧是什么，你都可以使用上面的第二个指标 .ratioScrolled，例如：

var y = Math.round((1 - ev.ratioScrolled) * -100);

因此，例如，如果您有一个高度为 150 像素的 div 和一个高度为 250 像素的图像，那么上面的内容将完美运行 - 它从 -100 像素开始（向上移动）并且随着页面滚动，无论它碰巧有多长，它以 0px 结束（无移位 - 所以底部 100px 被剪裁）。

于 2013-03-17T20:47:26.030 回答