視差背景性能和行為

Question

到目前為止，我已經創建了一個水平滾動的站點，該站點對元素背景圖像具有視差效果（將其拉伸以適合視口的大小）。 我已經使用Stellar.js庫實現了效果。

$.stellar({
    horizontalScrolling: true,
    verticalScrolling: false,
    horizontalOffset: $(window).width()
});

但是，我面臨兩個問題。

1. 圖像趨於在元素完全消失之前“用完”。 在下面顯示白色背景。 這種效果的嚴重程度取決於視口的大小和形狀，因此我想嘗試找出涉及圖像大小，縱橫比或定義的滾動比例的數學方法是不值得的。 是否有一種方法可以使Stellar中的滾動比例“自動”，從而使背景永遠不會“用完”（或者有替代的視差庫可以做到這一點）？
2. 無論使用何種瀏覽器和機器，效果的表現都很糟糕。 消除background-size: cover似乎可以改善一些東西，但是還不夠“足夠”； 使用img元素會改善背景圖片的性能嗎？ 這是一個巨大的變化，而且做起來很麻煩，但是如果它可以解決滾動緩慢的問題，那將是值得的。

提前致謝！

Answer 1

正如@Shivam建議的那樣，請改用skrollr.js。 我有這個完全相同的問題。 請參閱： 填充容器的視差背景圖像

Skrollr.js將開始偏移設置為0，因此即使將背景設置為封面，您也不會在圖像下方獲得該空間。

這是我遵循的教程，可以在我的網站上使用它： http : //ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/ 。 說明中唯一缺少的是，在步驟1中，您還需要包括示例文件隨附的imagesloaded.js文件。 希望有幫助！ 我花了幾天的時間來尋找解決方案！