視差滾動

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」是你想比移動較慢的元素要使元素移動較慢，請增加速度變量。爲了讓它移動得更慢，減少它。