視差背景性能和行爲

到目前爲止，我已經創建了一個水平滾動網站，對元素背景圖像（這些圖像被拉伸以適合視口的大小）具有視差效果。我用Stellar.js庫來達到這個效果;視差背景性能和行爲

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

但是，我面臨的兩個問題;

在元素完全消失之前，圖像往往會用光;顯示下面的白色背景。這種效果的嚴重程度取決於視口的大小和形狀，所以我猜測試圖找出涉及圖像大小，寬高比或定義的滾動比例的數學是不值得的。有沒有辦法讓Stellar內的滾動比例爲「自動」，以便背景永遠不會「耗盡」（或者是否有另一個視差庫可以實現這一點）？
無論瀏覽器和機器如何，效果的表現都很糟糕。刪除background-size: cover似乎有所改善，但不夠「;將使用img元素提高背景圖像的性能？這是一個巨大的變化和一個混亂的方式，但如果它修復了laggy滾動，它將是值得的。

在此先感謝！

來源

2013-08-22 Emphram Stavanger

只是一個建議，嘗試** [skrollr.js]（https://github.com/Prinzhorn/skrollr）**。視差效果更強大，更平滑，更靈活。 – Shivam

感謝您的建議; Skrollr中有沒有一種方法可以確保背景圖像始終覆蓋其元素，並根據該值調整滾動比例？ –

由於@Shivam建議，請改用skrollr.js。我有這個完全相同的問題。請參閱：Parallax background image that fills container

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

下面是我遵循的教程，以便在我的網站上實現此操作：http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/。指令中唯一缺少的是在步驟1中，還需要包含示例文件附帶的imagesloaded.js文件。希望有所幫助！我花了好幾天的時間試圖爲此找到解決方案！

來源

2014-03-11 01:00:10

視差背景性能和行爲

回答

相關問題