視差滾動波濤洶涌

我想爲我的網站獲得一個很好的視差滾動效果，只要我使用滾動條滾動頁面看起來不錯。但是，當我使用鼠標滾輪的鍵盤 - 它真的很波濤洶涌。這是JS的一部分，負責視差。視差滾動波濤洶涌

$(window).scroll(function(){ 
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){ 
     var temp = 100 - ($(document).scrollTop() - 1200)/8; 
     var bonus = '50% ' + temp + '%'; 
     document.getElementById('div').style.backgroundPosition = bonus; 
    } 
}

有人能告訴我爲什麼它波濤洶涌？我試圖將背景圖像調整爲較小的背景圖像，但這似乎並不是一個問題，因此我嚴重失去了法力值，不知道我做錯了什麼。任何幫助，將不勝感激。

來源

2013-11-15 bagienny

我也試過不重新定位背景，但做了一個img，絕對定位並擺弄「頂」的價值，但沒有運氣。動畫仍然不流暢。 – bagienny

你解決了這個問題嗎？ – across

由於輸入波動，滾動不連貫。使用鍵盤或鼠標滾輪滾動使頁跳轉。

如果你想要一個漂亮的轉換，我會推薦使用CSS3轉換。

他們驚人地容易設置，並且是可插入的;您可以將它們彈出到現有的（波濤洶涌）過渡狀態，並突然變得流暢。

我不是100％肯定，你可以把background-position一個過渡，但是如果可以的話，這是你會怎麼做：

transition: .15s ease-in-out; 
transition-property: background-position;

出於兼容性插件：

-webkit-transition: .15s ease-in-out; 
-moz-transition: .15s ease-in-out; 
-o-transition: .15s ease-in-out; 

-webkit-transition-property: background-position; 
-moz-transition-property: background-position; 
-o-transition-property: background-position;

當然，還有更多的選擇和花裏胡哨的，但這應該讓你開始。

來源

2013-11-15 12:58:37 Halcyon

是的，它很流暢，但我可以使用jquery的動畫功能獲得相同的效果。但那不是重點。在滾動到不同的進度後，我可以看到背景重新定位。我希望它是瞬間的。如果我不清楚自己想要什麼，那麼比對不起。一個很好的訣竅 - 我一定會找到它的一個很好的用處。 – bagienny

如果您使用不同的寬鬆方式，您可能會感覺到一種快樂，也許是「輕鬆」。轉換優於動畫，因爲轉換可以通過硬件加速。 – Halcyon

我遇到了同樣的問題，並找到了解決這個問題的巧妙方法。「最後開發商」發現你必須解決對滾動方向的背景位置和工作：

$(window).scroll(function(){ 
    if($(document).scrollTop() > 600 && $(document).scrollTop() < 2500){ 
     var temp = 100 - ($(document).scrollTop() - 1200)/8; 
     var bonus = '50% ' + temp*-1 + '%'; 
     document.getElementById('div').style.backgroundPosition = bonus; 
    } 
}

使用這個CSS爲您的div

background-attachment: fixed;

這definetly感覺更順暢了很多對我。來源：The Last Developer

來源

2014-08-11 21:02:51 Niksac

這完全工作在一個隨機的網站，我被要求檢查爲什麼視差是波濤洶涌 – Starfs

我很高興找到一個快速和簡單的解決方案。安裝這個平滑的滾動插件使得鼠標滾動非常平滑，並消除了突變/波紋視差問題。 http://bassta.bg/2013/05/smooth-page-scrolling-with-tweenmax/

來源

2014-11-20 01:36:29

視差滾動波濤洶涌

回答

相關問題