css - 视差滚动

Question

谁能指出我正确的方向？我有一个带有固定背景图像的 DIV，但我希望它在向下滚动页面时以较慢的速度滚动。我不擅长 jQuery 或 CSS3，所以寻求帮助。

提前致谢。

Answer 1

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 2

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

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

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

http://stephband.info/jparallax/

Answer 3

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

Answer 4

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