视差滚动

Question

任何人都可以指向正确的方向吗？我有一个固定的背景图像DIV，但我希望它滚动页面时以较慢的速度滚动。我对jQuery或CSS3不太了解，所以需要一些帮助。

在此先感谢。

Answer 1

这可能会帮助：http://stephband.info/jparallax/ 原来的节点到该移动绝对定位的层回应鼠标。

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

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

Answer 4

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”是你想比移动较慢的元素要使元素移动较慢，请增加速度变量。为了让它移动得更慢，减少它。