如何根據滾動條移動來移動DIV的背景圖像？

Question

我一直在尋找parallax effects在我的網頁上進行垂直滾動，經過一番研究後，我不確定我想要做的技術上是視差效果。

從我所看到的情況來看，大多數視差效果都假設您希望能夠無限滾動滾動的許多背景圖像，或者使用重複的巨大圖像。

我想要做的是當滾動條到達頁面底部時，背景圖像將填充兩個DIV。 請注意，我不希望背景圖像拉伸。我假設要得到我希望這些圖像的垂直高度大於大多數人的視口的效果，然後他們的垂直位置會發生變化。當用戶的滾動條位於頂部時，可以看到一定量的背景，然後在用戶向下滾動時垂直移動以填充背景空間。

請參考下面的圖像的希望acheive的效果的視覺解釋：

的veiwport的高度將根據內DIV中的內容的長度而變化。

我的麻煩是，如果我想要做的並不完全是視差效應，那麼我不知道還有什麼要稱它，而且我試圖通過描述它來搜索，使我回到提供教程的頁面上視差效應。所以我因爲缺乏術語而陷入困境。

如果有人可以指導我如何根據滾動條位置來控制背景的垂直位置，那將非常感激。如果只用CSS就可以做到這一點，但我假設需要一些Javascript。 jQuery解決方案也適用於我。

---

更新：

使用意見提出的條款，搜索後，我有外DIV的背景圖像幾乎做我想做的用下面的代碼：

$(window).scroll(function() { 
var yPos = $("#outerDiv").height() - ($("#outerDIV").height() * ($(window).scrollTop()/$(window).height())); 
document.getElementById('outerDIV').style.backgroundPosition="0px " + yPos + "px"; 
}); 

它將背景圖像相對於滾動向右移動，但它缺少的是將該運動限制在視口內。基於視口和DIV大小獲得正確的比例被證明只是超出了我的數學能力。

Answer 1

原來我想acheive是可能的，沒有特殊的插件，只是一些經過深思熟慮的數學。我確實使用了一點jQuery語法，但我認爲這不是必須的。

下面的代碼有很多註釋，所以希望它很大程度上是解釋性的。總之，只需要在滾動條位於頂部時查找背景圖像的位置，以及滾動條位於底部時的位置，然後可以使用滾動條移動的百分比找出你在這兩點之間的位置。這當然是一個小技巧，當然，你必須考慮到滾動條的總高度和你的DIV在頁面上出現的位置之間的差異以及其他一些調整，但是我所做的細節下面。

我在這裏所做的僅僅是我在我的問題中描述的「外部DIV」。爲了讓背景像我描述的「內部DIV」一樣移動，您必須修改代碼，可逆地通過逆轉一些參數。我還沒有這樣做，但它似乎是一個簡單的任務。

希望其他人發現此代碼有用。如果有人對如何提高效率或更好提出建議，請告訴我。

function moveBG(){ 
    // imageHeight is not the total height of the image, 
    // it's the vertical amount you want to ensure remains visible no matter what. 
    var imageHeight = 300; 
    // Get the maximum amount within the DIV that the BG can move vertically. 
    var maxYPos = $("#outerDIV").height() - imageHeight; 
    // Get the amount of vertical distance from the top of the document to 
    // to the top of the DIV. 
    var headerHeight = document.getElementById("outerDIV").offsetTop; 
    // Calculate the BG Y position for when the scrollbar is at the very top. 
    var bgTopPos = $(window).height() - headerHeight - imageHeight; 
    // I don't want the image to wander outside of the DIV, so ensure it never 
    // goes below zero. 
    if (bgTopPos < 0) 
    { 
     bgTopPos = 0; 
    } 
    // Calculate the BG Y position when the scrollbar is at the very top. 
    var bgBottomPos = $(document).height() - $(window).height() - headerHeight; 
    // To prevent the BG image from getting cut off at the top, make sure 
    // its position never exceeds the maximum distance from the top of the DIV. 
    if (bgBottomPos > maxYPos) 
    { 
     bgBottomPos = maxYPos; 
    } 
    // Subtract the top position from the bottom, and you have the spread 
    // the BG will travel. 
    var totalYSpan = bgBottomPos - bgTopPos; 
    // Get the scrollbar position as a "percentage". Note I simply left it as a 
    // value between 0 and 1 instead of converting to a "true" percentage between 
    // 0 and 100, 'cause we don't need that in this situation. 
    var scrollPercent = ($(window).scrollTop()/($(document).height() - $(window).height())); 
    // The percentage of spread is added to the top position, and voila! 
    // You have your Y position for the BG image. 
    var bgYPos = bgTopPos + (Math.round(totalYSpan * scrollPercent)); 
    // Apply it to the DIV. 
    document.getElementById('outerDIV').style.backgroundPosition="0px " + bgYPos + "px"; 
} 
// Place the BG image correctly when opening the page. 
$(document).ready(function() { 
    moveBG(); 
}); 
// Make it update when the scrollbar moves. 
$(window).scroll(function() { 
    moveBG(); 
}); 

Answer 2

爲了您的要求，您必須使用jQuery的視差插件來指導這項活動，我最好的建議是使用Superscollorama並與元素作爲你的願望玩...

至於你問題，試試這個例子，

controller.addTween(
    '#examples-background', 
    (new TimelineLite()) 
    .append([ 
     TweenMax.fromTo($('#parallax-it-left'), 1, 
     {css:{backgroundPosition:"(0 -54px)"}, immediateRender:true}, 
     {css:{backgroundPosition:"(0 -54px)"}}), 
     TweenMax.fromTo($('#parallax-it-right'), 1, 
     {css:{backgroundPosition:"(0 -54px)"}, immediateRender:true}, 
     {css:{backgroundPosition:"(0 54px)"}}) 
    ]), 
1000 // scroll duration of tween 
); 

您串行副變化，只要你的願望......

嘗試實踐這個插件，希望對你有用...

http://johnpolacek.github.io/superscrollorama/

謝謝...