视差滚动

Question

有人能指出我正确的方向吗？我有一个固定的背景图像的DIV，但我希望它在向下滚动页面时以较慢的速率滚动。我对jQuery或CSS3不太满意，所以请求一些帮助。

提前致谢。

Answer 1

网络上有很多关于视差效果的教程。这里的区域二只是形成一个简单的谷歌搜索“视差效果教程”：

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://richardshepherd.com/smashing/parallax/

http://stephband.info/jparallax/

Answer 2

这可能有所帮助：http://stephband.info/jparallax/ 它将节点转换为绝对定位的层，以响应鼠标移动。

Answer 3

http://potentpages.com/parallax-scroll-tutorial/

这是我公司和我创建的一个教程，描述了如何创建一个像你所说的网页。它不需要任何jQuery或高级CSS。

有很多关于如何创建视差网站的图书馆和教程。我们在这里列出了一些：

http://potentpages.com/parallax-tutorials/

相关的javascript是：

var topDiv = document.getElementById("topDiv");
var speed = 1.5;

window.onscroll = function()
{
   var yOffset = window.pageYOffset;
   topDiv.style.backgroundPosition = "0px "+ (yOffset / speed) + "px";
}

其中“topDiv”是您想要比“常规滚动速度”移动得慢的元素。要使元素移动较慢，请增加速度变量。为了让它移动得更慢，请减少它。

Answer 4

window.onscroll = function(e)
{
    var val = document.body.scrollTop / your_scroll_factor;
    document.getElementById('your_background_image').style.posTop = -val;
}