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

可能是完全吠叫错误的树,但你可以使用div background-image元素制作视差滚动图像吗?

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

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

www.parkhallmanor.co.uk/new

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

是的,那是可能的。

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

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

#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。 如果页面长度超过1200px且元素仍然可见,则必须调整数学,因为之后代码将滚动到图像的顶部。 如果他们已经在那个点上已经过了元素,你可以忽略它。

显然你应该调整那里的数字,以便为你的div和图像获得正确的效果。

如果你想将它基于页面总高度而不管它是什么,你可以在那里使用第二个指标,。ratioScrolled,如:

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

因此,例如,如果你有一个高度为150px的div和一个250px高的图像,上面的工作将完美 – 它从-100px(向上移动)开始,随着页面滚动,无论它发生了多长时间,它以0px结束(无移位 – 因此底部100px被剪裁)。