HTML5獨立滾動的視角錯覺

Question

是否有一些示例HTML代碼，建立以下效果：

有一個前景層，包含文本和圖像。然後有一個背景圖層，顯示圖像，

當用戶滾動頁面時，前景會以常規速度滾動，但速度較慢的背景。

這將創建一個類似Flintstones的人造視角。

Answer 1

你說的這個「人造視角」叫做parallax。

有許多可用的演示在線

• http://webdev.stephband.info/parallax.html
• http://dev.jonraasch.com/scrolling-parallax/examples/scrolling-parallax

我建議在body與background-attachment: fixed使用背景圖片，然後設定一個較短的計時器來檢查頁面滾動長度。

在計時器的每次更新，檢測滾動長度，和通過改性劑相乘（比如0.1），設置該新值作爲background-position：

$body = $('body'); 

function parallax() 
{ 
    var pageOffsetX, pageOffsetY, modifiedOffsetX, modifiedOffsetY; 

    pageOffsetX = ...//get the offset 
    pageOffsetY = ...//get the offset 
    modifiedOffsetX = pageOffsetX * 0.1; 
    modifiedOffsetY = pageOffsetY * 0.1; 

    $body.css('background-position', modifiedOffsetX + 'px ' + modifiedOffsetY + 'px'); 
    setTimeout(parallax, 100); 
} 

parallax(); 

改性劑是背景多少應該移動每個px用戶滾動。如果不應該重複背景，則可能需要調整偏移量，並且可能需要取消偏移，具體取決於如何獲取pageOffset值。

調整超時將改變背景的響應度。您可能能夠捕獲鼠標滾動事件，但是您還必須檢查用戶是否通過鏈接等跳到頁面上。

Answer 2

這些是不是你正在尋找的機器人，但最終的效果非常相似：http://webdev.stephband.info/parallax.html

這些層在響應鼠標移動，並根據它們的尺寸（和選擇層初始化），他們以不同的方式移動，以一種類似parallaxy的方式移動。

您可能想要改變它並調整它，以使視差效果僅爲水平（設置選項xparallax:false）。

Answer 3

我的方法是先設置background: fixed爲頁面，然後不斷輪詢頁面以確定window.pageYOffset值是否已更改[1]。如果它發生了變化，則可以將背景圖像向上或向下移動（半| 1/3 |四分之一|任意），以模仿您正在談論的效果。

我不會嘗試編碼，但我會很感興趣，看到你的結果。

[1]注意：不要通過附加一個事件到pagescroll事件來做到這一點，因爲這樣做可以seriously screw up most browsers，因爲Twitter瞭解到困難的方式。