Question

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

我想要发生的是我目前有一些带有文字效果翻转图像的DIV，但是我在背景图像中使用视差我希望将3D主题与所有网站图像保持一致。

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

www.parkhallmanor.co.uk/new

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

Answer 1

是的，这是可能的。

因为你可能知道正常的视差效果只是在身体标签上放置一个bg图像，并且在你滚动时改变它的背景偏移，或者在它上面移动一些div比滚动速率慢。

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

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

0 -800px是background-position。当窗口向下滚动时，您希望通过逐渐增加第二个值来向下移动背景，以模拟透视。在模拟的视角中，更远的东西慢慢地从你身边移动，近距离的东西快速移动。

所以你得到滚动事件：

$(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);

例如，如果你有一个高度为150px的div和一个250px高的图像，上面的效果会很好 - 它从-100px（向上移动）开始，随着页面滚动，无论它发生多长时间是，它以0px结束（没有移位 - 因此底部100px被剪裁）。

有没有办法在DIV内进行视差工作

1 个答案: