在滾動JavaScript庫上縮放和移動背景圖像

Question

我注意到幾個網站有背景圖像縮小，中，並基於滾動移動。我熟悉視差滾動，但這似乎有點不同，因爲背景圖像實際上並沒有改變。

我的意思是（這裏也有一些視差）的一些例子是flatvsrealism和DiscoverLab。 Flatvsrealism在它轉向現實生活的時候尤其如此。

既然我確定這樣做太複雜了，你自己做，我想知道是否有任何JavaScript庫可以工作。我對ScrollMagic很熟悉，但它似乎沒有能力延伸至此。

Answer 1

要做到這一點，你會想讓你的視差滾動修改你的背景圖像的大小，除了它的位置。要做到這一點，設置您的視差滾動元素的背景屬性，在Javascript：

[your parallax object].style.background= "color image repeat attachment position size"; 

注：顏色是十六進制代碼或RGBA（，圖像的URL，重複是你是否希望背景重複，附件將被「滾動」，位置將成爲您的背景圖像的位置，並且尺寸將爲「xpx ypx」

此代碼將在您的滾動位置處進行。替換設置背景圖片位置的代碼;這將使用「背景」的組合屬性。您需要將大小設置爲訪問者向下滾動頁面的距離的函數。

確切的代碼將取決於您的庫以及如何實現視差滾動。

如果您正在尋找視差庫，我會建議您在jQuery中編寫自己的視差函數。這樣你就可以修改你的功能來改變背景大小。有一個完整的清單jQuery parallax tutorials here。