有没有一种方法，使一个DIV内视差工作(Is there a way to make paralla

可能是完全找错了树，但使用一个div背景图像元素，你可以做一个视差滚动图像？

我希望发生的是我现在有一些div与文本效果过渡图像，但我为我使用视差背景图片我想保持3D主题，所有站点的图像。

编辑：例如，是否有可能使这个页面上的蓝色框：

www.parkhallmanor.co.uk/new

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

Answer 1:

是的，这是可能的。

正如你可能知道一个正常的视差效果只是把一个背景图片在身上的标签，要么改变你滚动它的背景偏移，或在它的上面比滚动速度较慢的移动一些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并逐渐使得其方式为0，一旦用户已经滚动到1200像素下来。 如果页面超过1200像素长和元素仍是可见的，你必须调整数学，因为之后的代码将滚过图像的顶部。 如果他们将已经成为过去的那点元素虽然，你可以忽略它。

显然，你应该调整的数字那里得到您的div和图像权的效果。

如果您想让它总页面高度不管它正好是，你可以使用第二个指标在那里，.ratioScrolled，如：

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

因此，例如，如果您有相关的高度为150px一个div和图像250像素高，上面会很好地工作 - 它开始于-100px（移）和页面滚动的，不管它发生多久是，它（无移位 - 这样的底部100像素被削波）结束于0像素。

文章来源: Is there a way to make parallax work within a DIV